[[深刻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 $dataconstructor (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/settersconst getter = property && property.getconst setter = property && property.setif ((!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源码04-Vueset-和-vmset-Vuedelete-和-Vmdelete

导航