this.$set原理

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

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

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

相关问题

this.$set的原理

this.$set()是Vue.js框架中的一个方法，用于在Vue实例中设置响应式属性。其原理是通过调用Vue.prototype.$set方法，将属性设置为响应式属性。Vue.prototype.$set方法实际上是调用了Vue.set方法，Vue.set方法是从../observer/index文件中导出的，用于设置响应式属性。Vue.set方法的实现原理是通过调用defineReactive方法，将属性设置为响应式属性。defineReactive方法会为属性创建一个Dep对象，用于收集依赖和通知更新。当属性的值发生变化时，会触发Dep对象的notify方法，通知所有依赖该属性的Watcher对象进行更新。

代码示例：

// 在Vue实例中使用this.$set方法设置响应式属性
this.$set(this.obj, 'key', 'value');

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 ]