【vue源码】$set实现原理

Vue 的 $set 方法用于确保新增或更改的属性成为响应式的,即使在数据初始化之后。它针对目标值是对象或数组的情况有不同的处理方式:对于对象,如果属性已存在则直接更新;对于数组,通过内部拦截处理数组的 splice 方法以保持响应式;而对于新属性,使用 defineReactive 创建 getter 和 setter 实现响应式更新。在面试中理解这一原理有助于回答 JS 面试题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$set的作用

vm.$set(target, key, value)中接收三个参数

  • targer 目标值
  • key 将要设置的属性
  • value 要设置的值 对于在初始化data时已经设置的值,当我们改变他们的值,可以触发视图更新,但是新增的属性却无法被追踪到并触发视图更新,例如:person:{name:'张三'}中我们想要再添加一个age属性,通过赋值的方式设置属性并不是响应式。因此需要借助$set方法去设置。

前期准备和资料

  • 本文基于vue2.6.14版本进行解读
  • demo地址传送门(为了方便查看源码执行过程,请在debugger下进行调试查看,在demo关键代码处已打debugger)
  • demo相关代码

解读

前端相关代码

<div id="app"><h2>数组的处理</h2><p v-for="num in numList">{{num}}</p><button v-on:click="add">添加</button><h2>新增的属性</h2><p v-if="person.name">{{person.name}}</p><p v-if="person.age">{{person.age}}</p><button v-on:click="setAge">添加age</button>
</div>
<script> let vue = new Vue({el: '#app',data: {numList:[0,1],person:{name: '张三',}},methods:{add(){this.$set(this.numList, this.numList.length, this.numList.length)},setAge(){this.$set(this.person, 'age', 18)}},}); </script> 

$set的原理是在vue的原型上添加$set的方法,同时针对以下三种情况情况分别进行处理

  • 当key已经存在于target上的时候,直接修改target中对应key的值
  • 当target是数组的时候,借助vue内部拦截处理后数组的splice方法进行赋值,vue对数组的'push','pop','shift','unshift','splice','sort','reverse'方法进行拦截处理成响应式,调用这些方法,可以触发界面的更新(后续添加这部分解说),如果只是通过arr[2]=2的方式进行赋值不会触发视图更新。
  • 对于新增的属性,通过defineReactive把数据转化成getter和setter的方式,并触发数据变化通知
function set (target, key, val) {if (isUndef(target) || isPrimitive(target)) {warn(("无法在未定义、null或基元值上设置被动属性"));}// 对数组的处理if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key);target.splice(key, 1, val);return val}// target已经存在对应的keyif (key in target && !(key in Object.prototype)) {target[key] = val;return val}// 新增的属性的处理var ob = (target).__ob__;if (target._isVue || (ob && ob.vmCount)) {warn("target不能是vue的实例或根数据对象");return val}if (!ob) {target[key] = val;return val}defineReactive$$1(ob.value, key, val);ob.dep.notify();return val}Vue.prototype.$set = set; 

下图是对数组进行处理的代码执行

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值