vue中一些方法的原理

Posted 2020-12-11 znlam

1.$set

　用法：this.$set(Object, key, value)或 Vue.$set(Object, key, value)

   原理：当data数据中存在某个属性时，我们对他进行更改，页面会更新；但是如果data数据中没有某个属性值，我们对其更改，页面不会显示此属性；那是因为再vue初始化的时候，已经将data中定义的数据处理成响应式的了，所以数据的改变会触发页面的更新；但是新增的属性却不是响应式的，虽然打印可以看到对象确实多了此属性，但是由于不是响应式的，所以不会体现在页面上

##源码
位置：src/core/observer/index.js

 //set接收三个参数，target/key/val  target的类型为对象或者数组
export function set (target: Array<any> | Object, key: any, val: any): any {
  //当前环境为生产环境并且 target为null/undefined 或者 || target为string/number/symbol/boolean的一种时  抛出警告
  if (process.env.NODE_ENV !== ‘production‘ &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  //数组
  //判断是数组并且key为有效的数组索引
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    //将target数组的长度设置为target.length和key中的最大值
    target.length = Math.max(target.length, key)
    //做替换操作
    target.splice(key, 1, val)
    return val
  }
  //对象
  //key为数据中的一个属性并且不是Object原型上的属性
  if (key in target && !(key in Object.prototype)) {
    //已经存在说明是响应式的，直接更新
    target[key] = val
    return val
  }
  //之前不存在的情况
  //定义ob的值为target._ob_ 
  const ob = (target: any).__ob__
  //target对象是vue实例对象或者根数据对象，就会抛出错误
  if (target._isVue || (ob && ob.vmCount)) {
    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
  }
  //ob不存在，target不是响应式的
  if (!ob) {
    target[key] = val
    return val
  }
  //对新添加的key或者val做响应式
  defineReactive(ob.value, key, val)
  //通知更新
  ob.dep.notify()
  return val
}

参考链接：https://www.cnblogs.com/heavenYJJ/p/9559439.html