vue $set原理

$是Vue框架中的一个方法，它的作用是在改变对象或数组的属性值时触发视图的更新。具体原理如下：

1. 首先，Vue在原型上添加了$set方法，该方法接收三个参数：目标对象、属性名和属性值。

2. 当需要改变对象的已有属性时，$set方法会直接修改目标对象中对应属性的值。

3. 当目标对象是数组时，$set方法会利用Vue内部拦截处理后的数组的splice方法进行赋值。Vue对数组的'push'、'pop'、'shift'、'unshift'、'splice'、'sort'、'reverse'方法进行拦截处理，使其成为响应式的。通过调用这些方法，可以触发视图的更新。但是直接通过下标赋值的方式如arr=2是不会触发视图更新的。

4. 当需要新增属性时，$set方法会通过defineReactive将数据转化为getter和setter的方式，并触发数据变化通知。这样新增的属性也能被观察并触发视图的更新。

综上所述，$set方法通过不同的处理方式来实现对目标对象的属性更新并触发视图的更新。

相关问题

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 ]

this.$set原理

this.$set是Vue.js框架中的一个方法，用于在响应式对象（即通过Vue实例或组件的data选项定义的对象）上设置新的属性或修改已有属性的值。

它的原理是通过调用Vue实例的内部方法$set来实现属性的响应式更新。$set方法接受三个参数：对象、属性名和属性值。当调用$set方法时，Vue会首先检查对象是否是响应式的，如果不是，则会将其转换为响应式对象。然后，Vue会检查属性名是否已经存在于对象中，如果存在，则直接更新属性的值；如果不存在，则会使用Vue的内部方法defineReactive将属性添加到对象中，并将其转换为响应式。

这种机制确保了新添加或修改的属性能够触发Vue的响应式系统，从而更新相关的视图。通常情况下，在Vue中直接给对象赋值是不会触发视图更新的，需要使用this.$set方法来实现。