前言

之前了解了一下Object.defineProperty();接下来就想理解一下vue的双向绑定原理。

实现vue的$watch

先使用一下vue的$watch()方法:

1
2
3
4
5
6
7
const app = new Vue({
data:{
a:1
}
})
app.$watch("a",()=>console.log("监听成功"))
app.a='hello';//打印 监听成功

接下来用原生js实现vue的$watch()方法:

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
const vm = {
_data: {},// 用于存放data值
$data: {},// 原始数据对象,当前值
callback: {}
};
vm.$watch = (obj, func) => {
// 回调函数
vm.callback[ obj ] = func
// 设置data
Object.defineProperty(vm.$data, obj, {
get() {
//获取值时先将值存入vm._data[obj]
return vm._data[ obj ]
},
set(val) {
// 比较原值,不相等则赋值
if (val != vm._data[ obj ]) {
vm._data[ obj ] = val;
vm.callback[ obj ]();//执行回调
}
}
})
}
vm.$watch('va', () => {console.log('已经成功被监听啦')})
vm.$data.va = 1