乐趣区

关于javascript:vue源码04-Vueset-和-vmset-Vuedelete-和-Vmdelete

jiezi

导航

[[深刻 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()
// 手动告诉
}
退出移动版