Vue数据双向绑定原理

Vue监听数据变化原理

话不多说上代码

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
let data = {name: 'tyy'};
observe(data);
/**
 * 遍历源数据
 * @param obj
 */
function observe(obj) {
  if (!obj || typeof obj !== 'object') return;
  for (let key in obj) {
    defineReactive(obj, key, obj[key]);
  }
}
/**
 * 监听数据
 * @param obj
 * @param key
 * @param val
 */
function defineReactive(obj, key, val) {
  // 监听对象的子对象的数据变化
  observe(val);
  Object.defineProperty(obj, key, {
    get: () => {
      return val;
    },
    set: (newValue) => {
      val = newValue;
      console.log('i am change')
    },
    writeable: true, // 是否可写
    enumerable: true, // 是否可枚举
    configurable: false // 是否递归
  }

参考博客:https://segmentfault.com/a/1190000004346467