关于javascript:Vueset-源码解析

7次阅读

共计 7788 个字符，预计需要花费 20 分钟才能阅读完成。

Vue.set 源码解析

用过 Vue 的同学应该都晓得 Vue.set 这个 api，在 Vue2.x 组件实例初始化之后，动静给 data 选项增加属性是不会触发响应的，如果心愿动静增加的属性也能触发响应式机制，这个时候就能够用 Vue.set 这个 api。理解过原理的同学应该不多，但面试常常会问到，因而这边剖析一下 Vue.set 源码实现。

这个 api 是做什么的

首先看源码之前，举荐看一下官网文档的形容，这样更容易了解源码。

留神文档中形容的几个重点：向 响应式对象 中增加属性，确保新增加的属性也是响应式的，且 触发视图更新，传入的对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

从文档上来看，set 办法能够用于对象，也可用于数组：

// 在对象上增加一个属性，同时触发响应
this.$set(this.someObj, 'a', 1);
// 应用下标批改数组，同时触发响应
this.$set(this.arr, 1, 2333);

这边须要留神下，set 办法能够在两个中央拜访到，一种是作为 Vue 结构器的静态方法，另一种是实例办法，两个办法是完全一致的：

// Vue 结构器的静态方法
Vue.set();
// 作为实例办法，这是全局 Vue.set 的别名
vm.$set();

在哪里看源码

因为 set 办法是挂载在 Vue 结构器上的静态方法，那么 set 必然是在 Vue 结构器初始化过程中挂载下来的，因而咱们能够去看一下 global-api/index.js，在第 44 行进行 set 的挂载：

Vue.set = set

而后就顺藤摸瓜，找一下 set 办法从哪里引入的：

import {set, del} from '../observer/index'

这会应该很分明了，从 observer/index 引入，而且还是命名导出，set 的源码在：

node_modules/vue/src/core/observer/index.js:201

首先先看下这个模块都做了那些事件。这个模块次要用于将一般 JS 对象转换为响应式对象，定义了一个类和若干办法：

// 用于将察看对象的属性进行 getter/setter 转换，实现依赖收集 (collect dependencies) 和派发更新 (dispatch updates)
export class Observer {}
// 用于创立 Observer 实例，如果曾经是 Observer 实例就不再反复创立
export function observe()
// 在对象中定义响应式属性
export function defineReactive()
// 在对象中设置一个属性，如果属性不存在，则触发更改告诉 (change notification)
export function set()
// 删除一个对象属性并触发告诉
export function del()

其中 Observer 类、observe 办法和 defineReactive 办法的调用关系是：

  • 调用 observe 办法，传入须要察看的值；
  • 在 observe 办法中创立 Observer 实例，对传入的值进行察看；
  • 在 Observer 类的结构器中，调用 walk 实例办法将对象的每个属性进行遍历，而后调用 defineReactive 办法将对象属性进行 getter/setter 转换；

总结一下，observer 办法能够察看一个对象，而 defineReactive 是察看对象的一个属性

响应式机制剖析

首先在 observer 办法中判断传入的值是否为 JavaScript 对象，如果是，创立 Observer 实例进行察看，简化后的代码如下：

export function observe(value) {if (!isObject(value) || value instanceof VNode) {
    // 不是对象，或者是 VNode 的实例，不进行察看
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    // 如果是响应式对象就不再察看
    ob = value.__ob__
  } else {
    // 非响应式对象，创立 Observer 实例进行察看
    ob = new Observer(value)
  }
  return ob
}

在 Observer 类中，判断传入的是对象还是数组，如果是数组，则须要重写数组的变更办法，而后观测数组，如果是对象，间接观测对象。简化后的代码如下：

export class Observer {constructor (value) {
    this.value = value
    // 将 __ob__ 属性增加到传入的对象上，用于将对象标记为响应式对象
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      // 如果是数组，则重写数组的变更办法
      protoAugment(value, arrayMethods)
      // 观测数组
      this.observeArray(value)
    } else {
      // 观测对象
      this.walk(value)
    }
  }

  walk (obj) {const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      // 应用 defineReactive 将对象的每个属性进行 getter/setter 转换
      defineReactive(obj, keys[i])
    }
  }

  observeArray (items) {for (let i = 0, l = items.length; i < l; i++) {
      // 调用 observe 察看对象的每个元素（如果是对象就察看，根本类型不察看）observe(items[i])
    }
  }
}

在 defineReactive 办法中，给对象的属性增加 get 和 set 办法。简化后的代码如下：

export function defineReactive(obj, key, val) {const dep = new Dep()
  // 如果对象的 configurable: false 则不进行观测
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {return}
  // 深度观测子属性
  let childOb = observe(val)
  // 应用 Object.defineProperty 将对象属性进行 getter/setter 转换
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      // 拜访对象属性的时候，触发 get 办法
      return val
    },
    set: function reactiveSetter (newVal) {
      // 设置属性的时候触发 set 办法
      if (val === newVal) {
        // 新值和旧值一样，不触发响应
        return
      }
      // 设置新值
      val = newVal
      // 对新值进行观测（如果是对象）childOb = observe(newVal)
      // 触发告诉更新视图
      dep.notify()}
  })
}

Vue.set 源码剖析

Vue.set 残缺代码如下：

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

首先判断传入 target 的类型，如果是 undefined、null 或者原始类型，打印正告信息：

if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
) {warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}

接着如果是数组，就调用数组的 splice 办法增加元素（Vue 重写了数组变更办法，调用 splice 会触发响应，上面会进行剖析）：

if (Array.isArray(target) && isValidArrayIndex(key)) {// 这行的作用是，如果传入下标大于数组长度，例如 [0, 1], 2, 2
  // 那么会将数组长度改为 3，失去 [0, 1, empty]
  target.length = Math.max(target.length, key)
  target.splice(key, 1, val)
  return val
}

如果是对象，且传入的属性存在于对象中，就间接批改属性值：

if (key in target && !(key in Object.prototype)) {target[key] = val
  return val
}

这个时候文档中说的 target 必须是响应式就发挥作用了，如果不是响应式，只能批改属性，不能触发视图更新了

那么前面对应的逻辑应该是传入的属性不存在于对象中，接下来首先判断的是传入对象是否为 Vue 实例或者 Vue 实例的根数据对象：

const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== 'production' && warn(
    'Avoid adding reactive properties to a Vue instance or its root $data' +
    'at runtime - declare it upfront in the data option.'
  )
  return val
}

而后如果是非响应式的一般对象，间接批改属性值：

if (!ob) {target[key] = val
  return val
}

如果是响应式对象，则调用 defineReactive 办法将这个属性进行 getter/setter 转换，并且触发告诉更新视图：

defineReactive(ob.value, key, val)
ob.dep.notify()
return val

Vue 2.x 怎么监听数组变动

JS 的数组操作方法有一些会批改原数组：

  • push
  • pop
  • shift
  • unshift
  • splice
  • sort
  • reverse

这些办法被称为 变更办法 。相比之下，还有一些是 非变更办法，例如 map、filter、concat 和 slice，这些办法不会批改原数组，而是返回一个新数组。

应用非变更办法，即新数组替换旧数组，能够触发响应从而更新视图，变更办法因为间接批改原数组，在 Vue 2.x 的响应式机制下监听不到数组变动，因而实践上是不能触发响应的，但实际上咱们应用变更办法都能够触发视图更新。

在 Vue 2.x 官网文档中提到，Vue 对数组的变更办法进行了包裹，所以也能触发视图更新。这里的包裹，能够了解为一种封装，那么 Vue 到底是怎么封装了。

咱们来看一下 observer/index.js 中的 Observer 类，简化后的代码如下：

export class Observer {constructor(value) {
    this.value = value;
    if (Array.isArray(value)) {
      // 解决数组
      protoAugment(value, arrayMethods);
      // 察看数组
      this.observeArray(value);
    } else {
      // 察看对象
      this.walk(value);
    }
  }
}

这里的 protoAugment 办法实际上就是一个工具函数，定义如下：

function protoAugment(target, src: Object) {target.__proto__ = src;}

那么再联合下面的用法，protoAugment 实际上就是把传入数组实例的 __proto__ 指针指向的内容给换掉了，换成了 arrayMethods。

不得不说 Vue 这个解决还是十分棒的，没有全局净化 Array.prototype 原型链，只是对须要响应式转换的数组实例进行解决。

// 只是对某个实例产生影响，没有净化原型链，举荐
[].__proto__ = arrayMethods;

// 净化原型链，不举荐
Array.prototype = arrayMethods；

而后接下来看 arrayMethods 是怎么解决的，这部分源码在：

node_modules/vue/src/core/observer/array.js

首先利用原型式继承，将 Array.prototype 作为原型创立空对象：

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

而后在 arrayMethods 下面重写数组办法，对数组的变更办法进行拦挡操作，同时触发告诉更新视图：

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {const original = arrayProto[method]
  // 在 arrayMethods 下面重写数组办法笼罩原来的办法
  def(arrayMethods, method, function mutator (...args) {
    // 首先调用数组原来的办法获取执行后果
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    // 判断数组是否进行插入操作
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 如果进行插入操作，察看插入的元素
    if (inserted) ob.observeArray(inserted)
    // 触发告诉更新视图
    ob.dep.notify()
    // 返回数组原来办法执行的后果
    return result
  })
})

再次称誉一下，Vue 采纳的是原型式继承 + 重写，没有间接批改原型链，思路值得借鉴。

// 原型式继承，没有批改原型链，举荐
const arrayMethods = Object.create(Array.prototype);
arrayMethods[methodsToOverride] = function() {};

// 批改原型链了，不举荐
Array,prototype[methodsToOverride] = function() {};

这边用到了一个 dep 办法，作用就是在对象上增加属性：

export function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

总结一下，Vue 应用了原型式继承，重写了数组办法（这里重写指的是面向对象编程中的重写），对数组变更办法进行了拦挡操作，同时触发告诉更新视图。

为什么 Object.freeze() 能够晋升渲染性能

Vue 官网举荐对不须要响应式的数据应用 Object.freeze() 进行解决，这样能够进步渲染性能，然而为什么 Object.freeze() 能够进步性能呢？

在上面代码中，应用 Object.getOwnPropertyDescriptor 打印一下对象解冻前和解冻后的变动：

let obj = {a: 1}
Object.getOwnPropertyDescriptor(obj, 'a') 
/**
 * {
 *     "value": 1,
 *     "writable": true,
 *     "enumerable": true,
 *     "configurable": true
 * }
 */
Object.freeze(obj)
Object.getOwnPropertyDescriptor(obj, 'a')
/**
 * {
 *    "value": 1,
 *    "writable": false,
 *    "enumerable": true,
 *    "configurable": false
 * }
 */

咱们看到，在对象解冻之后，writable 和 configurable 都变为 false，也就是说这个时候对象的属性值无奈再批改，也无奈通过 Object.defineProperty 批改对象属性的 descriptor。如果尝试用 Object.defineProperty 批改对象属性的 descriptor，则会报如下谬误：

Uncaught TypeError: Cannot redefine property: xxx

那么在 defineReactive 办法中，有这样一段代码：

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {return}

这段代码，外表上是一个校验，如果对象中存在 configurable: false 的属性，则不进行 getter/setter 转换。但实际上，这段代码也是逃生舱，如果不心愿对象进行响应式转换，只需 Object.freeze() 解冻对象即可。因为省略了响应式转换，无需再对对象进行深度遍历和递归解决，以及 getter/setter 转换，因而能够在肯定水平上晋升渲染性能。

参考

Vue.set – Vue 官网文档

我仿佛发现了 vue 的一个 bug

正文完
javascript
发表至： javascript
2021-08-01
 0
关于javascript:markdownit-插件如何写一
JS-和-JSON-的区别
关于javascript:React-hooks-的基础概念hooks链表
关于javascript:智能名片小程序创建名片页功能实现关键代码

站内搜索

-「」