Vue源码分析-数据劫持

红太狼 2022-12-05 00:44 161阅读 0赞

# 数据劫持(数据绑定) #

### observer ###

1.  给配置对象data对象中的数据进行劫持
2.  给data中的每个属性重新定义get和set
3.  为data中每个属性创建dep对象

### compile ###

在解析表达式的时候会创建对应的watcher对象,并建立watcher与dep的关系,

### dep ###

1.  在进行数据劫持时,给data每个属性都对应一个dep对象
2.  dep对象结构:id – 每个dep对象的唯一标识,subs—包含多个watcher对象的数组

特殊说明:当模板编译时,每个表达式编译会创建watcher对象,会将当前watcher对象添加到dep对象的subs中,当data属性改变时,会通知dep对象sub中的所有watcher,最终去更新页面

### watcher ###

当编译模板时,模板中非事件指令或表达式都对应一个watcher对象

对象组成\{

vm--vm对象

exp --对应指令的表达式

cb--当表达式对应的数据发生改变时,执行的回调,会更显页面显示

value – 表达式对应的值

depIds – 表达式对应的dep对象集合

### dep与watcher的关系:多对多 ###

在模板中一个表达式使用多次,一个dep对象对应多个watcher对象(表达式使用的次数)

表达式是对象点的形式,1个watcher对象对应多个dep对象(表达式包含data属性的数量)

### 相关代码 ###

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //mvvm.js observe(data,this)&nbsp; //observe-观察者 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //observe.js &nbsp; function observe(value, vm) { &nbsp; // 判断值是否是对象，只有对象才需要变成响应式 &nbsp; if (!value || typeof value !== "object") { &nbsp; &nbsp; return; &nbsp; } &nbsp; return new Observer(value); } &nbsp; &nbsp; function Observer(data) { &nbsp; // 存储data &nbsp; this.data = data; &nbsp; // 开始干活 &nbsp; this.walk(data); } &nbsp; &nbsp; walk: function (data) { &nbsp; &nbsp; var me = this; &nbsp; &nbsp; // 遍历第一层属性 &nbsp; &nbsp; Object.keys(data).forEach(function (key) { &nbsp; &nbsp; &nbsp; // me.convert(key, data[key]);--无用 &nbsp; &nbsp; &nbsp; // 将数据重新定义成响应式数据 &nbsp; &nbsp; &nbsp; me.defineReactive(data, key, data[key]); &nbsp; &nbsp; }); &nbsp; }, &nbsp; &nbsp; convert: function (key, val) { &nbsp; &nbsp; this.defineReactive(this.data, key, val); &nbsp; }, &nbsp; //定义响应式数据 &nbsp; defineReactive: function (data, key, val) { &nbsp; &nbsp; // 创建dep对象 &nbsp; &nbsp; // 所有响应式数据（data）都会有一个唯一的dep对象 &nbsp; &nbsp; // dep对象会通过闭包的方式保存响应式数据的getter和setter中 &nbsp; &nbsp; var dep = new Dep(); &nbsp; &nbsp; // 因为遍历只能遍历第一层属性，如果属性值是对象，还需要再进行响应式处理 &nbsp; &nbsp; // 进行隐式递归调用, 将data上所有属性都会变成响应式属性 &nbsp; &nbsp; var childObj = observe(val); &nbsp; &nbsp; &nbsp; // 将data上数据定义成响应式 &nbsp; &nbsp; Object.defineProperty(data, key, { &nbsp; &nbsp; &nbsp; enumerable: true, // 可枚举 &nbsp; &nbsp; &nbsp; configurable: false, // 不能再define &nbsp; &nbsp; &nbsp; get: function () { &nbsp; &nbsp; &nbsp; &nbsp; // 判断 Dep.target --&gt; 当前有没有要处理的watcher,在创建watcher对象的时候,来执行get方法 &nbsp; &nbsp; &nbsp; &nbsp; if (Dep.target) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 建立 dep 和 watcher 的联系 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dep.depend(); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; return val; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; set: function (newVal) { &nbsp; &nbsp; &nbsp; &nbsp; if (newVal === val) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; // 更新值 &nbsp; &nbsp; &nbsp; &nbsp; val = newVal; &nbsp; &nbsp; &nbsp; &nbsp; // 新的值是object的话，又要改成响应式数据 &nbsp; &nbsp; &nbsp; &nbsp; childObj = observe(newVal); &nbsp; &nbsp; &nbsp; &nbsp; // 通知订阅者 &nbsp; &nbsp; &nbsp; &nbsp; // 通过watcher更新用户界面 &nbsp; &nbsp; &nbsp; &nbsp; dep.notify(); &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; }); &nbsp; }, &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //Dep对象 &nbsp; var uid = 0; &nbsp; function Dep() { &nbsp; this.id = uid++; &nbsp; this.subs = []; } &nbsp; Dep.prototype = { &nbsp; addSub: function (sub) { &nbsp; &nbsp; this.subs.push(sub); &nbsp; }, &nbsp; &nbsp; depend: function () { &nbsp; &nbsp; // 给watcher添加dep &nbsp; &nbsp; // watcher.addDep(dep) &nbsp; &nbsp; Dep.target.addDep(this); &nbsp; }, &nbsp; &nbsp; removeSub: function (sub) { &nbsp; &nbsp; var index = this.subs.indexOf(sub); &nbsp; &nbsp; if (index != -1) { &nbsp; &nbsp; &nbsp; this.subs.splice(index, 1); &nbsp; &nbsp; } &nbsp; }, &nbsp; &nbsp; notify: function () { &nbsp; &nbsp; // 遍历所有watcher &nbsp; &nbsp; this.subs.forEach(function (sub) { &nbsp; &nbsp; &nbsp; // 调用watcher的更新方法 &nbsp; &nbsp; &nbsp; sub.update(); &nbsp; &nbsp; }); &nbsp; }, }; &nbsp; Dep.target = null; &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> watcher.js function Watcher(vm, expOrFn, cb) { //cb—updaterFn ,更新页面的函数 &nbsp; this.cb = cb; &nbsp; this.vm = vm; // expOrFn—获取vm表达式对应值的函数 &nbsp; this.expOrFn = expOrFn; &nbsp; this.depIds = {}; &nbsp; &nbsp; if (typeof expOrFn === "function") { &nbsp; &nbsp; this.getter = expOrFn; &nbsp; } else { &nbsp; &nbsp; this.getter = this.parseGetter(expOrFn.trim()); &nbsp; } //get方法内部调用this.getter,获取表达式对应的值 &nbsp; this.value = this.get(); } &nbsp; &nbsp; &nbsp; get: function () { //当前watcher对象作为Dep.target的值,先创建实现响应式数据,创建Dep对象,然后模板辨析,创建watcher对象 &nbsp; &nbsp; Dep.target = this; &nbsp; &nbsp; var value = this.getter.call(this.vm, this.vm); &nbsp; &nbsp; Dep.target = null; &nbsp; &nbsp; return value; &nbsp; }, &nbsp; parseGetter: function (exp) { &nbsp; &nbsp; if (/[^\w.$]/.test(exp)) return; &nbsp; &nbsp; var exps = exp.split("."); &nbsp; &nbsp; return function (obj) { &nbsp; &nbsp; &nbsp; for (var i = 0, len = exps.length; i &lt; len; i++) { &nbsp; &nbsp; &nbsp; &nbsp; if (!obj) return; //取值,执行get方法,创建dep对象 &nbsp; &nbsp; &nbsp; &nbsp; obj = obj[exps[i]]; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; return obj; &nbsp; &nbsp; }; &nbsp; }, &nbsp; &nbsp; &nbsp; addDep: function (dep) { &nbsp; &nbsp; // 1. 每次调用run()的时候会触发相应属性的getter &nbsp; &nbsp; // getter里面会触发dep.depend()，继而触发这里的addDep &nbsp; &nbsp; // 2. 假如相应属性的dep.id已经在当前watcher的depIds里，说明不是一个新的属性，仅仅是改变了其值而已 &nbsp; &nbsp; // 则不需要将当前watcher添加到该属性的dep里 &nbsp; &nbsp; // 3. 假如相应属性是新的属性，则将当前watcher添加到新属性的dep里 &nbsp; &nbsp; // 如通过 vm.child = {name: 'a'} 改变了 child.name 的值，child.name 就是个新属性 &nbsp; &nbsp; // 则需要将当前watcher(child.name)加入到新的 child.name 的dep里 &nbsp; &nbsp; // 因为此时 child.name 是个新值，之前的 setter、dep 都已经失效，如果不把 watcher 加入到新的 child.name 的dep中 &nbsp; &nbsp; // 通过 child.name = xxx 赋值的时候，对应的 watcher 就收不到通知，等于失效了 &nbsp; &nbsp; // 4. 每个子属性的watcher在添加到子属性的dep的同时，也会添加到父属性的dep &nbsp; &nbsp; // 监听子属性的同时监听父属性的变更，这样，父属性改变时，子属性的watcher也能收到通知进行update &nbsp; &nbsp; // 这一步是在 this.get() --&gt; this.getVMVal() 里面完成，forEach时会从父级开始取值，间接调用了它的getter &nbsp; &nbsp; // 触发了addDep(), 在整个forEach过程，当前wacher都会加入到每个父级过程属性的dep &nbsp; &nbsp; // 例如：当前watcher的是'child.child.name', 那么child, child.child, child.child.name这三个属性的dep都会加入当前watcher &nbsp; &nbsp; &nbsp; // 判断有没有保存过dep（通过id判断） &nbsp; &nbsp; if (!this.depIds.hasOwnProperty(dep.id)) { &nbsp; &nbsp; &nbsp; // 给dep保存watcher &nbsp; &nbsp; &nbsp; // 为什么给dep保存watcher？ &nbsp; &nbsp; &nbsp; // 因为watcher有更新用户界面的方法，当dep对应的响应式数据发生变化， &nbsp; &nbsp; &nbsp; // 就能通过dep找到所有的watcher，从而更新用户界面 &nbsp; &nbsp; &nbsp; dep.addSub(this); &nbsp; &nbsp; &nbsp; // 给watcher保存dep &nbsp; &nbsp; &nbsp; // 为什么给watcher保存dep？ &nbsp; &nbsp; &nbsp; // 防止dep保存多次同一个watcher &nbsp; &nbsp; &nbsp; this.depIds[dep.id] = dep; &nbsp; &nbsp; &nbsp; // 为什么dep保存watcher用subs数组？而watcher保存dep用depIds对象？ &nbsp; &nbsp; &nbsp; // this.depIds = { 0: dep0, 1: dep1 } 对象查找属性比数组遍历查找值快的多 &nbsp; &nbsp; &nbsp; // this.depIds = [0, 1] 就需要遍历，相当于要遍历所有元素 &nbsp; &nbsp; } &nbsp; }, &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> 更新页面的操作 &nbsp;update: function () { &nbsp; &nbsp; this.run(); &nbsp; }, &nbsp; run: function () { &nbsp; &nbsp; // 读取属性最新的值 &nbsp; &nbsp; var value = this.get(); &nbsp; &nbsp; // 读取属性上一次的值 &nbsp; &nbsp; var oldVal = this.value; &nbsp; &nbsp; // 如果值相等，就不更新 &nbsp; &nbsp; if (value !== oldVal) { &nbsp; &nbsp; &nbsp; // 将最新的值保存起来 &nbsp; &nbsp; &nbsp; this.value = value; &nbsp; &nbsp; &nbsp; // 调用更新用户界面的方法cb去更新 &nbsp; &nbsp; &nbsp; this.cb.call(this.vm, value, oldVal); &nbsp; &nbsp; } &nbsp; }, &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

# 双向数据绑定 #

1.  在解析v-model指令的时候,会给当前元素绑定input事件监听
2.  当input事件执行的时候,会将最新的值赋值给vm实例身上对应的属性,触发属性的set方法,通知dep对象subs中所有watcher,从而去更新页面

### 相关代码 ###

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> &nbsp; &nbsp; var me = this, &nbsp; &nbsp; &nbsp; // 读取当前属性的值&nbsp; &nbsp; &nbsp; &nbsp; val = this._getVMVal(vm, exp); &nbsp; &nbsp; // 绑定input事件，监听元素的value的变化 &nbsp; &nbsp; node.addEventListener("input", function (e) { &nbsp; &nbsp; &nbsp; // 获取当前元素最新的值 &nbsp; &nbsp; &nbsp; var newValue = e.target.value; &nbsp; &nbsp; &nbsp; // 如果相等就不更新 &nbsp; &nbsp; &nbsp; if (val === newValue) { &nbsp; &nbsp; &nbsp; &nbsp; return; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; // 更新data数据 --&gt; 触发setter方法，从而更新用户界面 &nbsp; &nbsp; &nbsp; me._setVMVal(vm, exp, newValue); &nbsp; &nbsp; &nbsp; // 将当前值存起来，方便进行下一次比较~ &nbsp; &nbsp; &nbsp; val = newValue; &nbsp; &nbsp; }); &nbsp; &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> &nbsp; _getVMVal: function (vm, exp) { &nbsp; &nbsp; var val = vm; &nbsp; &nbsp; exp = exp.split("."); // ['wife', 'name'] &nbsp; &nbsp; // 第一次遍历 val = vm['wife'] = {xxx} &nbsp; &nbsp; // 第二次遍历 val = {xxx}['name'] = 'rose' &nbsp; &nbsp; exp.forEach(function (k) { &nbsp; &nbsp; &nbsp; val = val[k]; &nbsp; &nbsp; }); &nbsp; &nbsp; return val; // 'rose' &nbsp; }, &nbsp; &nbsp; // 设置vm上对应表达式的值 &nbsp; _setVMVal: function (vm, exp, value) { &nbsp; &nbsp; var val = vm; &nbsp; &nbsp; exp = exp.split("."); &nbsp; &nbsp; exp.forEach(function (k, i) { &nbsp; &nbsp; &nbsp; // 非最后一个key，更新val的值 &nbsp; &nbsp; &nbsp; if (i &lt; exp.length - 1) { &nbsp; &nbsp; &nbsp; &nbsp; val = val[k]; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; val[k] = value; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }); &nbsp; }, &nbsp; </td> 
 </tr> 
 </tbody> 
</table>