Vue2的数据劫持

vue2的数据劫持使用Object.defineProperty对数据进行劫持，在数据变动时发布消息给订阅者，触发相应的监听回调。
以下是实现的代码 可以参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 先定义一个数据
const data = {
    name: 'arafat',
    age: 18
}
// 对数据进行遍历
for(let i in data){
    let value = data[i]
    // 依赖收集: 用于存储用到此数据的方法
    let arr = []
    // 通过Object.defineProperty对数据进行劫持
    Object.defineProperty(data , i, {
        get: function () {
            // 是否有此函数 没有就添加
            if(!arr.includes(window.__func)){
                arr.push(window.__func)
            }
            return value
        },
        set: function (newV){
            value = newV
            // 遍历订阅过的函数  并更新
            for(let j of arr){
                try{
                    j()
                }catch(err){
                    console.log(err)
                }
            }
        }
    })
}


function setName() {
    document.querySelector('.name').textContent = data.name
}
function setAge() {
    document.querySelector('.age').textContent = data.age
}
function setAll() {
    document.querySelector('.all').textContent = data.name + " - " + data.age
}
// 因为需要依赖收集  所以执行时全局暴露函数 使用完清空
function autoRun(fn){
    window.__func = fn
    fn()
    window.__func = null
}
autoRun(setName)
autoRun(setAge)
autoRun(setAll)