模拟Vue响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
模拟Vue响应式原理
文章图片

数据劫持
vue2中数据劫持使用了Object.defineProperty来实现
Object.defineProperty(obj, prop, descriptor)
参数

  • obj要定义属性的对象。
  • prop要定义或修改的属性的名称或 Symbol 。
  • descriptor要定义或修改的属性描述符。
返回值 被传递给函数的对象。
模拟vue中的data选项
// 模拟 Vue 中的 data 选项 let data = https://www.it610.com/article/{ msg:'hello' }// 模拟 Vue 的实例 let vm = {}// 数据劫持:当访问或者设置 vm 中的成员的时候,做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举(可遍历) enumerable: true, // 可配置(可以使用 delete 删除,可以通过 defineProperty 重新定义) configurable: true, // 当获取值的时候执行 get () { console.log('get: ', data.msg) return data.msg }, // 当设置值的时候执行 set (newValue) { console.log('set: ', newValue) if (newValue =https://www.it610.com/article/== data.msg) { return } data.msg = newValue // 数据更改,更新 DOM 的值 document.querySelector('#app').textContent = data.msg } })// 测试 vm.msg = 'Hello World' console.log(vm.msg)

模拟Vue响应式原理
文章图片

当data对象中有多个属性时,此时需要遍历vm,把每一个属性都转换成vm中的getter和setter
// 模拟 Vue 中的 data 选项 let data = https://www.it610.com/article/{ msg:'hello', count: 10 }// 模拟 Vue 的实例 let vm = {}proxyData(data)function proxyData(data) { // 遍历 data 对象的所有属性 Object.keys(data).forEach(key => { // 把 data 中的属性,转换成 vm 的 setter/setter Object.defineProperty(vm, key, { enumerable: true, configurable: true, get () { console.log('get: ', key, data[key]) return data[key] }, set (newValue) { console.log('set: ', key, newValue) if (newValue =https://www.it610.com/article/== data[key]) { return } data[key] = newValue // 数据更改,更新 DOM 的值 document.querySelector('#app').textContent = data[key] } }) }) }// 测试 vm.msg = 'Hello World' console.log(vm.msg)

模拟Vue响应式原理
文章图片

vue3中的数据劫持使用了ES6中的Proxy来实现,他可以代理一整个对象
const p = new Proxy(target, handler)
参数
  • target要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
  • handler一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。即执行代理行为的函数
MDN代码示例
const handler = { get: function(obj, prop) { return prop in obj ? obj[prop] : 37; } }; const p = new Proxy({}, handler); p.a = 1; p.b = undefined; console.log(p.a, p.b); // 1, undefined console.log('c' in p, p.c); // false, 37

测试示例
hello

模拟Vue响应式原理
文章图片

Observer类 功能
  • 负责把 data 选项中的属性转换成响应式数据
  • data 中的某个属性也是对象,把该属性转换成响应式数据
  • 数据变化发送通知
    模拟Vue响应式原理
    文章图片

    功能初步实现
    class Observer { constructor(data) { this.walk(data); } // 遍历对象所有属性 walk(data) { // 1,判断data是否是对象 if (!data || typeof data !== "object") { return; } // 2,遍历data对象的所有属性 Object.keys(data).forEach((key) => { this.defineReactive(data, key, data[key]); }); } // 调动Object.defineProperty把属性转换为getter和setter defineReactive(obj, key, val) { let that = this; // Dep类在Observer类做了两件事,先收集依赖,然后通知。 let dep = new Dep(); //负责收集依赖,并发送通知 this.walk(val); // 解决问题一, data属性是对象类型, 如果val是对象,将val内部属性转换成响应式数据, Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { // 收集依赖 Dep.target && dep.addSub(Dep.target); return val; // 这里如果是return obj[key]会发生死递归,返回的就是obj本身 }, set(newVal) { if (newVal === val) { return; } val = newVal; that.walk(newVal); // 解决问题二, 如果新赋值类型是对象类型,也需要循环处理,转换成响应式数据 // 发送通知 dep.notify(); }, }); } }

    在vue.js中引入observer
    //3,调用observer对象,监听数据变化 new Observer(this.$data);

    控制台打印vm对象,对应的data对象属性已经转化为getter和setter
    模拟Vue响应式原理
    文章图片

Compiler类 功能(操作DOM)
  • 负责编译模板,解析指令/插值表达式
  • 负责页面的首次渲染
  • 当数据变化后重新渲染视图
模拟Vue响应式原理
文章图片

class Compiler { constructor(vm) { this.el = vm.$el; this.vm = vm; this.compile(this.el); } //编译模板,处理文本节点和元素节点 compile(el) { let childNodes = el.childNodes; Array.from(childNodes).forEach((node) => { //对节点类型进行判断 // 处理文本节点 if (this.isTextNode(node)) { this.compileText(node); } else if (this.isElementNode(node)) { // 处理元素节点 this.compileElement(node); } // 判断node节点是否有子节点,有子节点判断递归compiler if (node.childNodes && node.childNodes.length) { this.compile(node); } }); } //编译元素节点,处理指令,这里处,理v-text,v-model compileElement(node) { console.log(node.attributes); // 遍历所有的属性节点 Array.from(node.attributes).forEach((attr) => { // 判断是否是指令 let attrName = attr.name; if (this.isDirective(attrName)) { // 处理指令 //v-text ==>text attrName = attrName.substr(2); // 属性名 let key = attr.value; // 属性值 this.update(node, key, attrName); } }); }update(node, key, attrName) { let updateFn = this[attrName + "Update"]; // 使this指向compiler对象 updateFn && updateFn.call(this, node, this.vm[key], key); }// 处理 v-text 指令 textUpdate(node, value, key) { node.textContent = value; // 这里如法炮制,在创建指令的时候创建watcher对象 new Watcher(this.vm, key, (newValue) => { node.textContent = newValue; }); }// 处理v-model指令 modelUpdate(node, value, key) { node.value = https://www.it610.com/article/value; // 这里如法炮制,在创建指令的时候创建watcher对象 new Watcher(this.vm, key, (newValue) => { node.value = https://www.it610.com/article/newValue; }); // 双向绑定,文本框值修改,视图改变,修改数据 node.addEventListener("input", () => { this.vm[key] = node.value; }); }//编译文本节点,处理差值表达式 compileText(node) { // console.dir(node) let reg = /\{\{(.+?)\}\}/; let value = https://www.it610.com/article/node.textContent; if (reg.test(value)) { let key = RegExp.$1.trim(); //把msg中的值取出来,替换差值表达式,赋值给 node.textContent node.textContent = value.replace(reg, this.vm[key]); // 在创建实例的时候, 创建watcher对象,当数据改变更新视图 new Watcher(this.vm, key, (newVal) => { node.textContent = newVal; }); } } //判断元素节点是否是指令 isDirective(attrName) { return attrName.startsWith("v-"); } //判断节点是否是文本节点 isTextNode(node) { return node.nodeType === 3; } // 判断节点是否是元素节点 isElementNode(node) { return node.nodeType === 1; } }

Vue中的响应式,Vue负责把data中的属性存储到实例,并且调用Observer和Compiler,Observer负责数据劫持,监听数据变化,把data中的数据转换为getter和setter。Compiler负责解析差值表达式和指令,这里面需要使用观察者模式监听数据的变化
模拟Vue响应式原理
文章图片

创建Dep和Watcher
模拟Vue响应式原理
文章图片

Dep类 功能
  • 收集依赖,添加观察者(watcher)
  • 通知所有观察者
    class Dep { constructor() { // 存储所有的观察者 this.subs = []; } // 添加观察者 addSub(sub) { //判断是否为观察者对象 if (sub && sub.update) { this.subs.push(sub); } } // 发送通知 notify() { this.subs.forEach((sub) => { sub.update(); }); } }

Watcher类 【模拟Vue响应式原理】功能
  • 当数据变化触发依赖, dep 通知所有的 Watcher 实例更新视图
  • 自身实例化的时候往 dep 对象中添加自己
    模拟Vue响应式原理
    文章图片

    模拟Vue响应式原理
    文章图片

    class Watcher { constructor(vm, key, cb) { this.vm = vm; // data中的属性名称 this.key = key; // 回调函数负责更新视图 this.cb = cb; // 把watcher对象记录到Dep类的静态属性target Dep.target = this; // 触发get方法,在get方法中会调用addSub this.oldValue = https://www.it610.com/article/vm[key]; Dep.target = null; // 防止重复添加 } //当数据发生变化时更新视图 update() { let newValue = this.vm[this.key]; if (this.oldValue === newValue) { return; } this.cb(newValue); } }

总结
模拟Vue响应式原理
文章图片

    推荐阅读