Vue的vue.$set()方法源码案例详解

发布时间:2021-08-30 20:40:36 作者:chen
来源:亿速云 阅读:145

本篇内容主要讲解“Vue的vue.$set()方法源码案例详解”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue的vue.$set()方法源码案例详解”吧!

在使用vue开发项目的过程中,经常会遇到这样的问题:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

这是因为新加入的属性不是响应式的,因此不会触发视图的更新,通常使用静态方法Vue.set()或者实例方法this.$set()解决 ,使用方式:

对象:this.$set(target,key,  value)

数组:this.$set(target,index,  value)

但不管是静态方法Vue.set()还是实例方法this.$set(),他们底层的实现逻辑是一样的,实现逻辑如下:

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set (target: Array<any> | Object, key: any, val: any): any {
  // 首先判断如果传入的目标对象是undefined, null, primitive(原始值),或抛出警告
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 判断目标对象target是数组,并且key是合法的索引
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 取目标数组的length值和key中较大的值作为target的length属性
    target.length = Math.max(target.length, key)
    // 通过splice对key位置的元素进行替换
    target.splice(key, 1, val)
    return val
  }
  // 如果key在目标对象中已经存在,则直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 获取target中的observer对象
  const ob = (target: any).__ob__
  // 如果target是vue实例或者$data直接返回
  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
  }
  // 如果ob存在,把key设置为响应式属性
  defineReactive(ob.value, key, val)
  // 发送通知,触发视图更新
  ob.dep.notify()
  return val
}

以上是vue 中set方法的源码,在这里需要特别注意的是,在对数组进行处理时,所用的splice方法并不是数组本身的方法,而是在vue中封装的具有响应式的数组方法。

到此,相信大家对“Vue的vue.$set()方法源码案例详解”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Vue3.0+TS企业实际应用分析
  2. DataGear怎么整合前端框架Vue

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:如何使用c++实现OpenCV绘制图形旋转矩形

下一篇:opencv-python基本图像处理的用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》