两个获取 B 站 Vue 实例的方式

[timongh]

Note: 第一个评论中提到的方法应该更好，可以先看那个

在网上找到了在油猴中获取网站 Vue 实例的方法。经测试也可以用在 B 站上。以下为我修改后的 demo 脚本；新建油猴脚本，把脚本复制进去，在 B 站相关的网页进行测试，打开控制台查看输出。测试时建议先关闭 Bilibili-Evolved。

// ==UserScript==
// @name         Hook Vue Instance
// @namespace    http://tampermonkey.net/
// @match        http*://*.bilibili.com/*
// @run-at       document-start
// ==/UserScript==

const orgDefineProperty = Object.defineProperty
let vuePrototype = null
Object.defineProperty = function(...args) {
    if (args[1] === '$data') {
        vuePrototype = args[0]
        console.log('[vue hook] Vue.prototype hooked:', vuePrototype)

        Object.defineProperty = orgDefineProperty

        const orgInit = vuePrototype._init
        vuePrototype._init = function(options) {
            console.log('[vue hook] initing vue instance:', this)
            return orgInit.call(this, options)
        }
    }
    return orgDefineProperty.apply(this, args)
}

有了 B 站的 Vue 实例，我们可以用 B 站的函数做到许多以前做不到、不易做的事。但同时，我们也必须及时应对 B 站“升级 Vue 版本”或“改变内部 API” 所带来的变化。

考虑到 Bilibili-Evolved 也使用了 Vue，可能需要先想个办法区分 B 站的 Vue 对象和我们的 Vue 对象，才能正确实装到 Bilibili-Evolved 中。

该方法原贴来自这里：三句话让Vue对我放下防备

[timongh]

我又找到了该作者的另外两篇文章，也可以用来获取 Vue 实例，应该比上面的方法好：

• Vue初探 __vue__
• 通过 __vue__ 获取数据

我的总结：在 Vue 组件生成的 html 元素中，根元素所对应的 JS 对象上有个 __vue__ 属性，这就是该组件的 Vue 实例。

[the1812]

__vue__ 我有用过, 但是依然有耦合过深的问题, 一旦其 data 的结构变动, 依赖这块的功能就都炸了

[timongh]

有道理，页面上的元素变动得应该比 Vue 实例慢些。难怪视频这块的核心 api 里，用的都是点击等操作页面元素的方式。