Hook Vue3 app

通过劫持Proxy方法，逆向还原Vue3 app元素到DOM

Tính đến 13-08-2022. Xem phiên bản mới nhất.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/449444/1080975/Hook%20Vue3%20app.js

Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.

Tác giả: DreamNya
Phiên bản: 1.0.2
Đã tạo: 12-08-2022
Đã cập nhật: 13-08-2022
Size: 2 KB
Giấy phép: MIT

【前言警告】

本脚本库作者完全没有接触过Vue2及Vue3正向开发，也不清楚其具体正向原理~~（脚本原理是倒推的）~~

本脚本库是作者根据自身JS经验及油猴中文网脚本开发指南加上断点逆向无意中发现的通用劫持方法而写，

局限于作者水平，可能存在诸多不合理之处，尽请谅解，另外欢迎交流、探讨。

【脚本原理】

根据Vue数据绑定机制，Vue为了保证数据同步，会对每个实例均创建一个app对象用于数据存储、监听、同步；

一旦该app对象中存储的变量发生变化，Vue便会监听到该变化并将其作用到相应的DOM元素中，以实现前端交互。

该app对象存在于闭包中，Vue2将其挂载在DOM元素中的__vue__属性中，可令油猴脚本直接获取；

但Vue3并未提供该方法，这导致通常油猴脚本无法直接获取app对象，加大针对Vue3框架的油猴脚本的开发难度。

本脚本库根据Vue3的数据绑定原理，通过劫持Proxy方法以暴露Vue3 app对象，并将其还原挂载到DOM元素中，

进而使油猴脚本可直接访问、操作该app对象，以实现油猴脚本与Vue3的快速交互。

【使用方法】

全局变量

vueApp

{Object} 以app.uid为key存储获取到的所有app对象

(若存在多个相同uid的app则以数组形式存储，可能存在可优化空间，下同)

vueHooked

{Object} 以app.uid为key存储已被还原的app对象

DOM元素属性

DOMelement.__vue__

{Object} 将获取到的app对象还原挂载到对应的DOM元素属性

（类似于Vue2的DOMelement.__vue__）

【使用示例】

必要元信息（油猴）

// @run-at       document-start
// @require      https://greasyfork.org/scripts/449444-hook-vue3-app/code/Hook%20Vue3%20app.js

必要元信息（脚本猫）

// @run-at       document-start
// @require      https://scriptcat.org/lib/567/1.0.2/Hook%20Vue3%20app.js

脚本示例（以Bilibili为例下同）

// ==UserScript==
// @name         Bilibile VUE3
// @run-at       document-start
// @match        https://www.bilibili.com/*
// @require      https://greasyfork.org/scripts/449444-hook-vue3-app/code/Hook%20Vue3%20app.js
// @grant        none
// ==/UserScript==

//暴露变量到全局
window._vueApp_ = vueApp;
window._vueHooked_ = vueHooked;

//等待元素加载
let timer = setInterval(() => {
    let app = vueHooked[108]
    if (app) {
        clearInterval(timer)
        console.log("已加载元素",app)
    }
})