Vue 视图更新原理
Vue 的视图更新原理次要波及的是响应式相干API Object.defineProperty 的应用，它的作用是为对象的某个属性对外提供 get、set 办法，从而实现内部对该属性的读和写操作时可能被外部监听，实现后续的同步视图更新性能
一、实现响应式的外围API：Object.defineProperty
Object.defineProperty的用法介绍：MDN-Object.defineProperty，上面是模仿 Vue data 值的更新对API接口进行初步理解
// 模仿 Vue 中的 dataconst data = {}// 对外不可见的外部变量let _myName = 'Yimwu'// 响应式监听 data 中的 nameObject.defineProperty(data, "name", { // 应用 data.name 时 get 办法被调用，返回外部存储变量值 get: () => { console.log('get') return _myName }, // 应用 data.name = xxx 批改变量时，set 办法被调用，设置外部存储变量值 set: (newVal) => { console.log('set') _myName = newVal }})console.log(data.name) // 输入 Yimwu getdata.name = 'Mr.Wu' // 输入 set (监听胜利)二、视图更新初步实现
1、updateView
为了不便 模仿视图更新，这里创立了一个函数 updateView ，当数据更新时，调用 updateView ，模仿进行了视图更新（在 Vue 中体现为 template 模板中援用了该变量值的 DOM 元素的变动）
// 验证更新是否触发function updateView(){ console.log('视图更新')}2、defineReactive
创立函数 defineReactive ，对 API Object.defineProperty 进行封装，承受三个参数，监听的指标对象、属性名，以及属性值，一个target(对象)通过调用 defineReactive 就可能实现对 key（对应属性名）进行监听，类比到 Vue 中:
<script>export default { data(){ // data ---> target name: 'yimwu' // name ---> key } // 'yimwu'---> value}</script>具体实现如下：
// 从新定义属性，监听起来function defineReactive(target, key, value){ Object.defineProperty(target, key, { get(){ return value }, set(newVal){ // value 始终在闭包中，此处设置实现后，下次get可能获取最新设置的值 // 这里有个小优化，若雷同则不触发更新 if(newVal !== value){ value = newVal // 触发更新 updateView() } } })}3、observe
observe 次要是用于对对象中的每个属性进行 defineReactive 监听
// 监听对象属性function observe(target){ if(typeof target !== 'object' || target === null) { // 不是数组或对象不适宜监听 return target } // 将对象的属性用 defineProperty 从新定义 for(let key in target) { defineReactive(target, key, target[key]) }}4、残缺代码以及测试例子
// 验证更新是否触发function updateView(){ console.log('视图更新')}// 从新定义属性，监听起来function defineReactive(target, key, value){ Object.defineProperty(target, key, { get(){ return value }, set(newVal){ // value 始终在闭包中，此处设置实现后，下次get可能获取最新设置的值 // 这里有个小优化，若雷同则不触发更新 if(newVal !== value){ value = newVal // 触发更新 updateView() } } })}// 监听对象属性function observe(target){ if(typeof target !== 'object' || target === null) { // 不是数组或对象不适宜监听 return target } // 将对象的属性用 defineProperty 从新定义 for(let key in target) { defineReactive(target, key, target[key]) }}// 筹备数据const data = { name: 'Yimwu', id: 001, information: { tel: '135xxxxx354', email: '[email protected]' }}// 监听数据observe(data)// 测试data.name = 'YI' // (监听胜利)输入 --> 数据更新data.age = { num: 21 } (监听胜利)输入 --> 数据更新data.information.tel = '13456xxx234' // (监听失败)data.age.num = 110 // (监听失败)5、视图更新优化（实现对象深度监听）
从下面测试的例子能够看出，对于data.information.tel这种嵌套的对象，初版的 defineReactive 是无奈进行监听的，解决的办法也很简略，对对象的所有属性进行监听函数的递归调用，即在执行 Object.defineProperty 前先进行递归调用 observe，如果该属性为对象，则 observe 会**递归调用
defineReactive**，不是则observe 间接返回，继续执行 Object.defineProperty，残缺代码及测试例子如下：
// 从新定义属性，监听起来function defineReactive(target, key, value){ // 再次用value嵌套调用 observe 深，若为对象，则进行进一步监听，若非value非对象则间接返回 observe(value) Object.defineProperty(target, key, { get(){ return value }, set(newVal){ // value 始终在闭包中，此处设置实现后，下次get可能获取最新设置的值 if(newVal !== value){ value = newVal // 触发更新 updateView() } } })}// 测试数据const data = { name: 'Yimwu', id: 001, information: { tel: '135xxxxx354', email: '[email protected]' }}// 监听数据observe(data)// 测试data.name = 'YI' // (监听胜利)输入 --> 数据更新data.information.tel = '00000000000' (监听胜利)输入 --> 数据更新6、如何了解 Vue.set
在应用 Vue 的过程中，咱们或者都有过这样子的经验，在 data 中定义了一个对象，而后在程序执行过程中给他动静增加了属性，而后对当咱们对该新增属性进行值更新时并没有触发视图更新，作为Vue初学者时，将 data 响应式当成黑盒看待，就很难了解它为啥不更新，而明天拨开原理后，这里就很容易了解了
data.id = { num: 010 } // (监听胜利)输入 --> 数据更新data.id.num = 110 // (监听失败)如上图所示，当给 id 赋值为一个对象时，触发了 id 的数据更新，而当对 id.num 进行赋值时，未触发数据更新，依据 步骤5 的代码能够看出，这其实是因为执行 set 的时候没有对设置的 value 进行解决，导致了 num 属性没有被设置监听。在这里的实例中，解决办法就比较简单粗犷了，只须要间接在 set 里将 set 承受的 value 放到 observe 函数里执行，就可能对 value 进行监听了，上面是最终的defineReactive函数代码以及测试例子：
// 从新定义属性，监听起来function defineReactive(target, key, value){ // 再次用value嵌套调用 observe 深，若为对象，则进行进一步监听，若非value非对象则间接返回 observe(value) Object.defineProperty(target, key, { get(){ return value }, set(newVal){ // 对于新减少的值进行深度监听，如 data.id = { num: 101 }, 新减少的 num 也将可能被监听到 observe(newVal) // value 始终在闭包中，此处设置实现后，下次get可能获取最新设置的值 if(newVal !== value){ value = newVal // 触发更新 updateView() } } })}// 测试数据const data = { name: 'Yimwu', id: 001, information: { tel: '135xxxxx354', email: '[email protected]' }}// 监听数据observe(data)// 测试data.id = { num: 010 } // (监听胜利)输入 --> 数据更新data.id.num = 110 // (监听胜利)输入 --> 数据更新三、视图更新优化———实现数组监听
在上一节【初步实现】中，曾经实现了对对象的所有属性、嵌套属性进行监听，然而，如果 某个属性是一个数组 呢，对数组进行 push、pop 等操作，会触发更新吗？很显然是不会的，因为 Object.defineProperty 并不具备监听数组外部变动的能力，那么咱们该如何解决呢————重写数组原型上的办法。
1、定义监听数组的原型
咱们都晓得，在 JS 中，任何对象都有原型，而咱们的目标是通过重写数组原型上办法（push、pop等）实现监听，而作为库或是框架，咱们都不应该去扭转全局原型上的任何原生办法或者属性，净化全局环境，所以，这里分3步：
第一步：创立一个对象，将数组的原型赋值给该对象const oldArrayProperty = Array.prototype
第二步：创立新对象，原型指向该对象const arrProperty = Object.create(oldArrayProperty)
第三步：重写该对象上的办法arrProperty.push = function(){} ...arrProperty.pop = function(){} ...
// 从新定义数组原型，退出触发更新的机制const oldArrayProperty = Array.prototype// 创立新对象，原型指向oldArrayPropertyconst arrProperty = Object.create(oldArrayProperty)// 重写原型上的办法（能够所有都重写，这里只进行大量举例）// arrProperty.push = function(){} // arrProperty.pop = function(){}// 优化写法const methods = ['push','pop','shift','unshift','splice']methods.forEach(method => { arrProperty[method] = function(){ updateView() Array.prototype[method].call(this, ...arguments) }})2、将须要监听的数组的原型指向自定义的非凡原型
对原来的 observe 进行批改，退出数组判断，如果是数组则批改该数组的原型，至此，数组监听实现，上面是 observe 批改后代码以及测试例子
// 监听对象属性function observe(target){ if(typeof target !== 'object' || target === null) { // 不是数组或对象 return target } // 如果是数组则批改该数组的原型 if(Array.isArray(target)){ target.__proto__ = arrProperty return } // 从新定义属性 for(let key in target) { defineReactive(target, key, target[key]) }}// 测试数据const data = { myCars: ['Bugatti','Koenigsegg']}// 监听数据observe(data)// 测试data.myCars.push('AE86') // (监听胜利)输入 --> 数据更新四、性能剖析
为了实现对象的每个嵌套 属性监听 的 全笼罩 ，须要对对象的属性进行 深度遍历，递归到底，所以对于性能的损耗是十分大的，特地是在初始化阶段，如果有大量的层级十分高的对象进行响应式监听的绑定，会 极大消耗 初始化时的 性能，导致拖慢 First Paint Time
总结
当应用 Vue 一段时间后，或者说曾经可能纯熟应用 Vue 的时候，咱们就须要开始进一步开掘 Vue 的高级用法、原理等，从根本上学习、理解 Vue 的 底层原理，通过理解 Vue 的相干 设计原理 后，可能使得咱们在平时开发的过程中，冲破 用得爽 这一档次，来到 用得好、用得巧 这样一种更加高级的档次，从底层原理的角度登程，将是性能优化以及架构设计的最好突破口！