vue this.$set的原理

Vue中的this.$set()方法的原理是通过修改目标对象的属性值来实现响应式更新。在Vue2中，当我们通过数组的下标去修改数组值，或者向对象添加属性时，对应的视图都无法进行更新，因为添加的数据不是响应式的，无法触发视图的重新渲染。而使用this.$set()方法可以解决这个问题。

具体原理如下：
1. 首先，this.$set()方法会判断目标对象是否为undefined、null或者是基本类型值，如果是，则会提示错误。
2. 然后，如果目标对象是数组并且key是一个有效的数组索引，this.$set()方法会将目标数组的长度设置为key和当前长度的最大值，并用新的值替换指定索引位置的值。
3. 如果目标对象中已经存在属性key，并且key不是Object.prototype的属性，this.$set()方法会直接修改目标对象的属性值为新的值。
4. 如果目标对象是Vue实例或者存在__ob__属性的对象，并且不是Vue实例本身或者已有的Vue实例数量大于0，this.$set()方法会发出警告，避免在运行时向Vue实例或其根$data添加响应式属性。
5. 如果目标对象不存在__ob__属性，this.$set()方法会直接修改目标对象的属性值为新的值。
6. 最后，this.$set()方法会通过defineReactive()方法将新设置的属性变为响应式，并通知依赖更新。
通过以上步骤，this.$set()方法实现了目标对象属性的响应式更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue中this.$set()原理](https://blog.csdn.net/XuM222222/article/details/99942522)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue源码学习之$set实现原理](https://blog.csdn.net/liu19721018/article/details/125554525)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]