vue &set,Vue.set

　　本文主要介绍vue的详细解释。Vue的$set()方法源码案例。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。

　　在用vue开发项目的过程中，我们经常会遇到这样一个问题：当在vue的数据中声明或赋值一个对象或数组时(数组中的值是一个对象)，会给对象添加一个新的属性。如果此属性的值被更新，视图将不会被更新。

　　这是因为新添加的属性没有响应性，所以不会触发视图的更新。通常通过使用静态方法Vue.set()或实例方法this来解决。$set()。如何使用它：

　　对象：这个。$set(目标，键，值)

　　数组：这个。$set(目标，索引，值)

　　但是不管是静态方法Vue.set()还是实例方法this。$set()，它们的底层实现逻辑是相同的。实现逻辑如下：

　　/**

　　*设置对象的属性。添加新属性和

　　*如果属性不存在，则触发更改通知

　　*已经存在。

　　*/

　　导出函数集(target: Arrayany Object，key: any，val: any): any {

　　//首先判断传入的目标对象是未定义的、空的、原语的，还是抛出警告。

　　if (process.env.NODE_ENV！==生产

　　(isUndef(target) isPrimitive(target))

　　) {

　　warn(`无法对未定义、null或原始值设置反应属性：${(target: any)} `)

　　}

　　//确定目标对象target是数组，键是合法索引

　　if(array . is array(target)isValidArrayIndex(key)){

　　//取目标数组的length值和key的较大值作为目标的length属性。

　　target . length=math . max(target . length，key)

　　//通过拼接替换关键位置的元素。

　　target.splice(键，1，值)

　　返回值

　　}

　　//如果目标对象中已经存在该键，则直接分配它

　　如果(键入目标！(在Object.prototype中键入)){

　　目标[键]=值

　　返回值

　　}

　　//获取目标中的观察者对象

　　const ob=(target: any)。__ob__

　　//如果目标是vue实例或者$data直接返回

　　如果(目标。_ is vue (ob . ob . VM count)){

　　process.env.NODE_ENV==生产警告(

　　避免向Vue实例或其根$data添加反应性属性

　　在运行时-在数据选项中提前声明。

　　)

　　返回值

　　}

　　//如果ob不存在，说明target不是响应对象。直接赋值，无需触发视图更新。

　　如果(！ob) {

　　目标[键]=值

　　返回值

　　}

　　//如果ob存在，将key设置为响应属性

　　defineReactive(ob.value，key，val)

　　//发送通知触发视图更新。

　　业务部门通知()

　　返回值

　　}

　　以上是vue中set方法的源代码。这里需要注意的是，处理数组时使用的拼接方法并不是数组本身的方法，而是封装在vue中的响应式数组方法。

　　关于vue的Vue的源码案例的详细讲解这篇文章到此为止。$set()方法。了解更多关于vue的Vue源代码的信息。$set()方法，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。