本篇内容主要讲解“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()方法源码案例详解”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
