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

 更新时间:2021年08月30日 16:03:15   作者:lmew  
这篇文章主要介绍了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()方法源码案例详解的文章就介绍到这了,更多相关Vue之vue.$set()方法源码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js bootstrap前端实现分页和排序

    Vue.js bootstrap前端实现分页和排序

    这篇文章主要为大家详细介绍了Vue.js结合bootstrap前端实现分页和排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 警告[vue-router] Duplicate named routes definition简单解决方法

    警告[vue-router] Duplicate named routes definition简单解决方法

    这篇文章主要关于介绍了警告[vue-router] Duplicate named routes definition的解决方法,这个错误提示是因为在Vue Router中定义了重复的路由名称,需要的朋友可以参考下
    2023-12-12
  • 浅谈Vue3中watchEffect的具体用法

    浅谈Vue3中watchEffect的具体用法

    watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数,本文主要介绍了Vue3中watchEffect的具体用法,感兴趣的可以了解一下
    2022-05-05
  • 误引用vuex-persistedstate导致用户信息无法清除问题及解决

    误引用vuex-persistedstate导致用户信息无法清除问题及解决

    这篇文章主要介绍了误引用vuex-persistedstate导致用户信息无法清除问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 对vue事件的延迟执行实例讲解

    对vue事件的延迟执行实例讲解

    今天小编就为大家分享一篇对vue事件的延迟执行实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue 中页面传值的多种方式小结

    Vue 中页面传值的多种方式小结

    本文主要介绍了Vue 中页面传值的多种方式小结,主要包括路由传参、Vuex 状态管理、Props 属性和事件传递数据这几种,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • 如何构建一个Vue插件并生成npm包

    如何构建一个Vue插件并生成npm包

    这篇文章主要介绍了如何构建一个Vue插件并生成npm包,帮助大家更好的理解和使用vue,方便以后的开发,感兴趣的朋友可以了解下
    2020-10-10
  • el-table多选toggleRowSelection不生效解决方案

    el-table多选toggleRowSelection不生效解决方案

    这篇文章主要给大家介绍了关于el-table多选toggleRowSelection不生效的解决方案,文中通过图文以及代码将解决办法介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • Vue导入Echarts实现散点图

    Vue导入Echarts实现散点图

    这篇文章主要为大家详细介绍了Vue导入Echarts实现散点图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-12-12
  • Vue路由 重定向和别名的区别说明

    Vue路由 重定向和别名的区别说明

    这篇文章主要介绍了Vue路由 重定向和别名的区别说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论