乐趣区

关于vue.js:能不能手写Vue响应式前端面试进阶

Vue 视图更新原理

Vue 的视图更新原理 次要波及的是响应式相干 API Object.defineProperty 的应用,它的作用是为对象的某个属性对外提供 get、set 办法,从而实现 内部对该属性的读和写操作时可能被外部监听,实现后续的同步视图更新性能

一、实现响应式的外围 API:Object.defineProperty

Object.defineProperty 的用法介绍:MDN-Object.defineProperty,上面是模仿 Vue data 值的更新对 API 接口进行初步理解

// 模仿 Vue 中的 data
const data = {}
// 对外不可见的外部变量
let _myName = 'Yimwu'
// 响应式监听 data 中的 name
Object.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  get
data.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 会 ** 递归调用,参考:前端 vue 面试题具体解答
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
// 创立新对象,原型指向 oldArrayProperty
const 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 的相干 设计原理 后,可能使得咱们在平时开发的过程中,冲破 用得爽 这一档次,来到 用得好、用得巧 这样一种更加高级的档次, 从底层原理的角度登程,将是性能优化以及架构设计的最好突破口!

退出移动版