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

头像
woow_wu7
    阅读 12 分钟
    2

    导航

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

    [[react] Hooks](https://juejin.im/post/684490...)

    [[部署01] Nginx](https://juejin.im/post/684490...)
    [[部署02] Docker 部署vue项目](https://juejin.im/post/684490...)
    [[部署03] gitlab-CI](https://juejin.im/post/684490...)

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

    前置知识

    一些单词

    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...

    • 案例

      <!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()
// 手动通知
}
    javascript前端vue.js
    woow_wu7
    10 声望2 粉丝
    « 上一篇
    [vue源码03] watch 侦听属性 - 初始化和更新
    下一篇 »
    [vue源码05] - Vue.extend

    引用和评论

    推荐阅读
    头像
    [React 从零实践02-后台] 权限控制

    woow_wu7阅读 1.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新