[油猴脚本开发指南]Vue初探__vue__

李恒道 · 发表于 2021-12-10 12:56:59

前文

本文基于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是根节点

如

<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

图片.png

可以发现没有vue属性

图片.png

我们在他的上一层找到了vue属性

这里简单介绍一些属性

图片.png

el为该属性对应的dom元素

图片.png

root为所有实例的根实例

图片.png

parent为该实例的父实例

图片.png

children为子实例

结语

那么到这里我们就简单了解了dom属性上的vue的一些内容

在此感谢cxxjackie

maxzhang · 发表于 2021-12-10 15:31:07

高产似__ __

李恒道 · 发表于 2021-12-10 15:38:38

maxzhang 发表于 2021-12-10 15:31
高产似__ __

现在写的开始乏力了
主要靠从论坛其他人身上学习了

s11s · 发表于 2024-5-24 09:05:40

中级篇《Vue 初探与代码分析》，这节课，课程中的B站案例__vue__找不到了，window.VUE_DEVTOOLS_TOAST =undefined ,现在B站是不用vue了吗？还是找的方式现在变了？

李恒道 · 发表于 2024-5-24 13:26:43

s11s 发表于 2024-5-24 09:05
中级篇《Vue 初探与代码分析》，这节课，课程中的B站案例__vue__找不到了，window.VUE_DEVTOOLS_TOAST =und ...

b站上vue3了
确实失效了