[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
案例

<!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__ 是不可枚举的，不会被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<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>

流程分析

data初始化
- 首先的data的初始化，因为有嵌套对象，会通过 let childOb = !shallow && observe(val) 继续观测子对象，最终使得所有的属性都具有响应式
初始化挂载和渲染
- 在 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就会更新触发渲染
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()
  // 手动通知
}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,686评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,668评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,160评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,736评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,847评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,043评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,129评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,872评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,318评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,645评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,777评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,861评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,589评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,687评论 2赞 351

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

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

导航

前置知识

一些单词

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

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

(1) Vue.set()源码

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

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

(3) Vue.delete

推荐阅读更多精彩内容