[油猴脚本开发指南]通过__vue__获取数据

李恒道

前言

本文根据cxxjackie提供的方法简单整理而成，由于我个人能力有限

可能我的描述存在一定的出入

警告

关于对页面进行调试，严重要求使用Chrome，经测试火狐浏览器显示数据不完整，其他浏览器情况未知

vue实例

在我们获取vue实例之后，可以查看当前vue实例是否存在我们想要的数据

如果存在，我们可以直接提取出来

如果不存在，我们可以继续根据parent或children继续往上级或者下级继续寻找数据

以b站为例

我们可以通过vue属性提取出来视频的基本数据

我们该怎么获取列表呢？

先以一个div为准

我们先获取info-box的节点

发现不存在vue属性，接下来往上级或者下级找，因为我用的dom元素偏下，所以往上层找

可以发现看到了vue属性，接下来我们看这些数据，下边的那些数据通常我们不用太过于在意，但是最好也点开看一下

着重看深紫色的部分

经过翻找

我们可以看到info就是我们想看到的视频数据

那我们如果想获取一整个视频列表，我们应该怎么办呢？

就是找他的parent属性，然后再查看数据

我们可以找到

打开看一下，发现存在一个数组，每个数组都是一个视频数据

这个时候我们就可以提取数据做我们想要做的事情了！

或对其进行修改来达到显示我们想要的显示的东西。

那么这节课我们就学习了如何使用vue属性

结语

撒花~

rubinTime

gege，这个__defineGetter__是用来干嘛的

李恒道

rubinTime 发表于 2021-12-12 19:58
gege，这个__defineGetter__是用来干嘛的

这些属性可以查看mdn文档，很干净标准
https://developer.mozilla.org/zh ... ct/__defineGetter__

__defineGetter__
非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
概述
__defineGetter__ 方法可以将一个函数绑定在当前对象的指定属性上，当那个属性的值被读取时，你所绑定的函数就会被调用。
语法
obj.__defineGetter__(prop, func)
示例
// 请注意，该方法是非标准的：
var o = {};
o.__defineGetter__('gimmeFive', function() { return 5; });
console.log(o.gimmeFive); // 5

rubinTime

那哥哥这步操作是在干嘛呢？

李恒道

rubinTime 发表于 2021-12-13 09:00
那哥哥这步操作是在干嘛呢？

在寻找__vue__属性

rubinTime

李恒道 发表于 2021-12-13 09:32
在寻找__vue__属性

直接 . 运算符查找不行吗

李恒道

rubinTime 发表于 2021-12-13 10:28
直接 . 运算符查找不行吗

就是用.呀
这里打印出来看提醒有没有相关属性

李恒道

rubinTime 发表于 2021-12-13 09:00
那哥哥这步操作是在干嘛呢？

突然很好奇，最后学的怎么样了

rubinTime

李恒道 发表于 2022-1-25 16:40
突然很好奇，最后学的怎么样了

我好久没逛论坛了，之前也是闲着无事帮我妹刷网课在关注到油猴结合js能做这么多东西 ，然后产生兴趣，看了论坛的一些教程感觉自己js内功还不是很深厚，慢慢的热情也褪去了，现在再看js的电子书想把基本功搞扎实些。我是学前端的，但我平时做的就是用vue或React搭建一个网站或者用nodejs写一些后台接口什么的吗，但是油猴脚本偏向实战，感觉很多都是对数据的劫持什么的，需要对其他的网站进行分析后写相应的代码实现功能，这我有些不适应。

李恒道

rubinTime 发表于 2022-1-28 16:13
我好久没逛论坛了，之前也是闲着无事帮我妹刷网课在关注到油猴结合js能做这么多东西 ，然后产生兴趣，看 ...

那没事了，哥哥有兴趣可以再学学
油猴开发还是很提升前端功底的
为了针对一些框架做功能
你不得不翻阅库的源码甚至打包的源码，来做分析和注入
哥哥可以以后有兴趣玩一玩