[油猴脚本开发指南]Vue初探__vue__
# 前文本文基于cxxjackie口述而写
由于研究还不是特别深入，所以可能存在一些事实性的出入
以后会慢慢修改和补正
# Vue
Vue之前也跟大家介绍了，所以这里不多赘述
如果你存在输入后存在校验，自动清空，无法点击按钮等问题，可以去
https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1250
寻找相关的处理方法，目前处理基本已经完善
# Vue简单介绍
Vue在我们new Vue的时候会创建一个Vue的实例，实例根据我们的模板内容做解析，绘制虚拟dom，并渲染到页面上
我们都知道vue存在组件，如果渲染页面的时候碰到组件会怎么办？因为组件需要具备vue的所有功能，所以干脆把组件也设计成一个vue实例
所以页面存在多个vue的实例对象
我们如何找到实例对象？
在一些元素上打印出__vue__属性即可
为什么存在__vue__属性这点可以在vue源码中的
```
Vue.prototype._update=function (vnode, hydrating) {
...
if (vm.$el) {
vm.$el.__vue__ = vm;
}
...
}
```
这里可以看到了挂载__vue__属性为自身的vue实例
这里的$el是根节点
如
```javascript
<div>
<span>123</span>
</div>
```
这时候只有根节点div具有__vue__属性
注意，如果存在组件，那么则该组件包含的html节点元素的根节点也具有__vue__属性
# 如何确定是否为vue页面
尝试打印是否存在window.__VUE_DEVTOOLS_TOAST__属性，如果存在通常为vue页面
# 查找__vue__属性
我们可以确定一个大概的范围，然后从该dom的上级或下级的dom元素找到__vue__属性
然后打印查看，找到一个vue实例，即可通过parent以及children属性找到上下级的vue实例
# 举例
https://live.kuaishou.com/profile/3x72uw4df7wdq8q?fid=436489844
可以发现没有__vue__属性
我们在他的上一层找到了vue属性
这里简单介绍一些属性
el为该属性对应的dom元素
root为所有实例的根实例
parent为该实例的父实例
children为子实例
# 结语
那么到这里我们就简单了解了dom属性上的__vue__的一些内容
在此感谢cxxjackie
高产似__ __ maxzhang 发表于 2021-12-10 15:31
高产似__ __
现在写的开始乏力了
主要靠从论坛其他人身上学习了 中级篇《Vue 初探与代码分析》，这节课，课程中的B站案例__vue__找不到了，window.VUE_DEVTOOLS_TOAST =undefined ,现在B站是不用vue了吗？还是找的方式现在变了？ s11s 发表于 2024-5-24 09:05
中级篇《Vue 初探与代码分析》，这节课，课程中的B站案例__vue__找不到了，window.VUE_DEVTOOLS_TOAST =und ...
b站上vue3了
确实失效了
页:
[1]