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

导航

[深入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
  • 注意点：
    • 数组中成员是对象时，修改数组成员成的对象的属性，是会响应式更新的
• 官网说明：https://cn.vuejs.org/v2/guide/reactivity.html
• 案例

  
  
  
  


  

    
{{this.obj}}
    
{{this.arr}}
    change - 不会响应
    change2 - 响应
  
  

( 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 | 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__ 是不可枚举的，不会被for，forEach遍历到该属性

    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) {
            //   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()案例流程分析

• 案例

  
  
  
  


  

    
{{this.obj}}
    change
  
  

• 流程分析

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 | 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()
  // 手动通知
}