码迷,mamicode.com
首页 > 其他好文 > 详细

vue中一些方法的原理

时间:2020-06-17 18:30:50      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:更新   product   cannot   显示   dex   notify   max   targe   word   

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

 

vue中一些方法的原理

标签:更新   product   cannot   显示   dex   notify   max   targe   word   

原文地址:https://www.cnblogs.com/znLam/p/13153779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!