[vue源码04] Vue.set 和 vm.$set ( Vue.delete 和 Vm.$delete )

1,948 阅读3分钟

导航

[深入01] 执行上下文
[深入02] 原型链
[深入03] 继承
[深入04] 事件循环
[深入05] 柯里化 偏函数 函数记忆
[深入06] 隐式转换 和 运算符
[深入07] 浏览器缓存机制(http缓存机制)
[深入08] 前端安全
[深入09] 深浅拷贝
[深入10] Debounce Throttle
[深入11] 前端路由
[深入12] 前端模块化
[深入13] 观察者模式 发布订阅模式 双向数据绑定
[深入14] canvas
[深入15] webSocket
[深入16] webpack
[深入17] http 和 https
[深入18] CSS-interview
[深入19] 手写Promise
[深入20] 手写函数

[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程
[源码] Redux React-Redux01
[源码] axios
[源码] vuex
[源码-vue01] data响应式 和 初始化渲染
[源码-vue02] computed 响应式 - 初始化,访问,更新过程
[源码-vue03] watch 侦听属性 - 初始化和更新
[源码-vue04] Vue.set 和 vm.$set

前置知识

一些单词

primitive: 原始的

对象和数组不会响应式更新的情况

  • 对象不响应式更新
    • 因为:data对象的响应式是通过 Object.defineProperty 的 getter/setter来实现的
    • 所以:只能响应对象已有属性的 ( 修改 ),不能响应对象属性的 ( 添加 ) 和 ( 删除 )
    • 解决办法:
      • 添加属性 Vue.set() , vm.$set()用 Object.assign({}, this.object, 添加新的属性的对象) 返回一个新的对象
      • 删除属性 Vue.delete(), vm.$delete()
  • 数组不响应式更新
    • 直接修改数组成员的值 arr[0] = 1000
    • 直接修改数组的长度 arr.length = 1000
    • 解决办法
      • 利用重写的数组的7种方法:push pop unshift shift splice sort reverse
      • 添加,修改:Vue.set() , vm.$set(), splice
      • 删除:Vue.delete(), vm.$delete(), splice
    • 注意点:
      • 数组中成员是对象时,修改数组成员成的对象的属性,是会响应式更新的
  • 官网说明:cn.vuejs.org/v2/guide/re…
  • 案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <div>{{this.obj}}</div>
    <div>{{this.arr}}</div>
    <button @click="change">change - 不会响应</button>
    <button @click="change2">change2 - 响应</button>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        obj: {
          number1: 1,
          number2: 2,
          number3: {
            number4: 4
          }
        },
        arr: [1, 2, {
          number5: 5
        }]
      },
      methods: {
        change() {
          this.obj.count = 1; // 对象添加属性,不会从新渲染
          Reflect.deleteProperty(this.obj, this.number2); // 对象删除已有属性,不会从新渲染
          this.arr[0] = 0; // 直接修改数组的值,不会从新渲染
          this.arr.length = 100; // 修改数组的长度,不会从新渲染
        },
        change2() {
          // 对象
          Vue.delete(this.obj, 'number2') // 删除对象属性
          Vue.set(this.obj, 'count', 1) // 给对象添加属性
          // 数组
          this.arr[2].number5 = 555; // 数组中有对象,是可以直接响应式更新的
          Vue.set(this.arr, 3, 300); // 添加数组成员
          Vue.set(this.arr, 0, 0) // 修改数组成员
          this.$set(this.arr, 0, 0) // 修改数组的某个成员的值 vm.$set 方法, vm.$set 实例方法是全局方法 Vue.set 的一个别名
          this.arr.splice(0, 1, 0) // 修改数组的某个成员的值 Array.prototype.splice 方法
          this.arr.splice(100) // 修改数组长度
        }
      },
    })
  </script>
</body>
</html>

( Observer类中的new Dep ) 和 ( defineReactive()中的new Dep ) 和 ( let childOb = !shallow && observe(val) )

  • Observer类中的new Dep
    • Observer类中的 dep = new Dep(),表示的是观测的对象对应的 dep
  • defineReactive()中的new Dep
    • 每个对象中的属性都执行defineReactive(),defineReactive()中的 dep = new Dep() 则是对象中每个属性对应的 dep
  • childOb = !shallow && observe(val)
    • 如果对象的属性还是一个对象,那么 childOb 就是子对象的 observer 实例

(1) Vue.set()源码

  • set - src/core/global-api/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
  // 参数
    // target 数组或者对象
    // key 对象的属性或者数组的下标,any类型
    // val any类型

  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
    // 如果是开发环境 并且 target是undefined,null,或者原始数据类型,就抛出警告
    // 也就是说 target 只能是对象或者数组
  }

  // ------------------------------------------------------------------------ 处理数组
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 如果target是数组类型,并且key是合法的下标类型及范围
    target.length = Math.max(target.length, key)
    // 取大的值
      // 比如:
      // target => [1,2,3]
      // Vue.set(target, 3, 4)
        // 1. target.length = 3
        // 2. key = 3
        // 12 得 max = 3
        // 最终:[1,2,3].splice(3, 1, 4) => [1,2,3,4]



    target.splice(key, 1, val)
    // 删除后插入
    // 这里的 splice 是重写过后的 splice,具有响应式

    return val
    // Vue.set() 的返回值
  }

  // ------------------------------------------------------------------------ 处理对象
  if (key in target && !(key in Object.prototype)) {
    // 修改对象已有属性,就直接修改返回
    target[key] = val
    return val
  }

  const ob = (target: any).__ob__

  if (target._isVue || (ob && ob.vmCount)) {
    // 如果target是vue实例 或者 rootData
    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) {
    // 如果ob不存在,即target.__ob__不存在,说明不是响应式数据,即普通对象的修改,直接赋值返回
    // 非响应式数据,也能使用Vue.set()
    target[key] = val
    return val
  }

  // ob存在
  defineReactive(ob.value, key, val)
  // defineReactive(ob.value, key, val)
    // 1. 作用就是给 value 对象的 key 属性添加响应式,访问get依赖收集,修改set派发更新
    // 2. 注意点:
      // ob.value = value 
      // 这里参数有三个,所以val就是直接传入的值
    // 3. 特别重要的点
      // 在 defineReactive(ob.value, key, val) 中
        // 子对象属性依赖收集:let childOb = !shallow && observe(val) 如果value还是一个对象,就会子对象属性就行依赖收集就会继续观察变成响应式
        // 子对象本身依赖收集:childOb存在,childOb.dep.depend(),对子对象依赖收集

  ob.dep.notify()
  // 手动派发更新
  // 因为上面 defineReactive(ob.value, key, val) 更新是要值被修改后才会更新,而这里没有修改值,即 Vue.set()后手动更新
  // target.__ob__ = new Observer(target) 
  // ob.dep.notify() = target.__ob__.dep.notify() 后续就会走派发更新的流程
  // 注意是:target对象的dep派发的更新,即从新渲染更新 target 的值

  // ob.dep.notify() 是重点

  return val
}
  • Observer - src/core/global-api/index.js
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    // value = data
    this.value = value

    this.dep = new Dep()
    // dep => Observer 类中的 dep 主要是为了通过 value.__ob__.dep.depend 的方法来做依赖收集
    // 主要用于 
      // childOb = !shallow && observe(val) =>  childOb = new Observer(value)
      // childOb.dep.depend()

    this.vmCount = 0
    def(value, '__ob__', this)
    // def(value, '__ob__', this)相当于 value.__ob__ = this
    // 区别是: def()方法的 __ob__ 是不可枚举的,不会被forforEach遍历到该属性

    if (Array.isArray(value)) {
      // 数组
      if (hasProto) {
         // 继承方式

        protoAugment(value, arrayMethods)
        // value.__proto__ =  data.__proto__ = arrayMethods
        // arrayMethods 上绑定了 7 个自定义的方法,当访问这7个方法的时候,触发mutator方法
          // mutator
            // 1. 首先会调用原生的 7 个方法正常的调用,并返回值
            // 2. 除了执行原生方法,还执行了一些副作用
              // (2-1) push unshift splice 都会把添加的元素转成数组赋值给 inserted
              // (2-2) 如果 inserted 存在,就执行 ob.observeArray(inserted)
              // (2-3)  ob.dep.notify() 手动派发更新,更新页面
      } else {
        // 赋值方式

        copyAugment(value, arrayMethods, arrayKeys)
        // def(target, key, src[key]
          // value.key = arrayMethods[key]
      }
      this.observeArray(value)
    } else {
      // 对象
      this.walk(value)
    }
  }
  • defineReactive - src/core/observer/index.js
export function defineReactive (
  // defineReactive(obj, keys[i])
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

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

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    // 如果 ( getter 不存在 或者 setter存在 ) 并且 ( 实参个数是2 )
    // 1. 初始化时 defineReactive(obj, keys[i]) 满树实参长度是 2
    // 2. 初始化时 getter 和 setter 都是 false
      //  初始化时因为12都满足,执行 val = obj[key]
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  // 1. !shallow  =>    初始化data时,shallow = undefined,满足条件
  // 2. observe(val) => 继续观察 data 的属性
    // 如果 data 的属性不是对象或数组,终止执行
    // 如果 data 的属性还是一个对象或数组,就继续 ob = new Observer(value) => 返回 ob
      // new Observer(value) 就又会给每个属性添加响应式

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          // 如果data的属性还是一个对象,childOb就存在
          childOb.dep.depend()
          // childOb.dep.depend()
          // 就是给所有嵌套的对象的每一个属性都去收集依赖,当嵌套对象对应的属性被访问时,也能够派发更新
          if (Array.isArray(value)) {
            // 如果data的属性是一个数组
            dependArray(value)
            // function dependArray (value: Array<any>) {
            //   for (let e, i = 0, l = value.length; i < l; i++) {
            //     e = value[i]
            //     e && e.__ob__ && e.__ob__.dep.depend()
            //     // ( value[i].__ob__ ) 存在就 ( 调用 value[i].__ob__.dep.depend() )
            //     // 注意:
            //      // __ob__属性只有被观察的 ( 对象或数组 ) 才具有
            //     if (Array.isArray(e)) {
            //       dependArray(e)
            //       // 还是数组,就递归
            //     }
            //   }
            // }
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

(1-1) Vue.set()案例流程分析

  • 案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <div>{{this.obj}}</div>
    <button @click="change">change</button>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        obj: {
          a: 1
        }
      },
      methods: {
        change() {
          debugger
          Vue.set(this.obj, 'b', 2)
        }
      },
    })
  </script>
</body>
</html>
  • 流程分析
  1. data初始化
    • 首先的data的初始化,因为有嵌套对象,会通过 let childOb = !shallow && observe(val) 继续观测子对象,最终使得所有的属性都具有响应式
  2. 初始化挂载和渲染
    • 在 template 中访问了 this.obj 所以会访问data,obj,以及obj中的所有属性,并且渲染出来
    • 注意:
      • 因为:访问rootData时,let childOb = !shallow && observe(val) 返回了 obj 的 observer
      • 所以: childOb.dep.depend() 就可以对 obj对象的 dep 进行依赖收集
      • 更新:Vue.set()的时候,对 obj.b = 2 建立了响应式,以后访问b就是get,修改b就会更新触发渲染
  3. Vue.set(this.obj, 'b', 2)
    • 当obj是undefined,null,基本类型数据时,警告
    • 处理数组:
      • 修改,添加,删除都通过重写后的 target.splice(key, 1, val) 来完成,将要处理的目标值构造成数组,通过ob.observeArray(inserted)继续观察,然后 ob.dep.notify() 手动派发更新,然修改的值反应在DOM上
    • 响应式处理对象 - ( 即 value.ob = observer 存在 )
      • 就是 defineReactive(ob.value, key, val) 对添加的对象属性新建立响应式
      • 然后 ob.dep.notify() 手动通知,因为在访问时已经对data的子对象obj做了let childOb = !shallow && observe(val) => childOb.dep.depend() 所以render watcher 订阅了 obj 的dep,obj变化就能通过到渲染watcher重新渲染
    • 普通的非响应式对象
      • 直接赋值

(2) vm.$set - 是全局 Vue.set 的别名。

(3) Vue.delete

  • Vue.delete = del
  • 源码
export function del (target: Array<any> | Object, key: any) {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    // 如果是开发环境 并且 (target是undefined,或者原始数据类型就警告)
    warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }

  // -------------- 数组
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 如果是数组,并且key是有效的数组下标范围

    target.splice(key, 1)
    // 利用重写的splice删除这个数组中的下标对应的成员
    return
  }

  // -------------- 对象
  const ob = (target: any).__ob__
  // 每个被观测的对象都有一个 __ob__ 属性
  // 即在 Observer 类中的构造函数中,就会把传入的 target.__ob__ = this ,指向observer实例
  // observer实例上有 dep 属性

  if (target._isVue || (ob && ob.vmCount)) {
    // 如果target是vue实例 或者 rootData
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    )
    return
  }

  if (!hasOwn(target, key)) {
    // 不是自身属性
    return
  }

  delete target[key]
  // 删除对象的属性

  if (!ob) {
    return
  }

  ob.dep.notify()
  // 手动通知
}