请说下vue set 原理
时间: 2023-05-26 19:05:29 浏览: 58
Vue.set是用于在Vue实例中设置响应式属性的方法。它的基本原理是通过使用Object.defineProperty()方法将新属性添加到对象中,从而使它成为响应式的。
具体实现步骤如下:
1. 判断当前对象是否是响应式对象,如果不是,将其转化为响应式
2. 判断属性是否已经存在,如果已经存在,则直接覆盖其值
3. 如果属性不存在,则使用Object.defineProperty()方法将新属性添加到对象中,并将其设置为响应式
4. 手动触发响应式更新,通知依赖于该属性的组件进行重新渲染
总之,Vue.set方法的原理就是在需要响应式的对象上使用Object.defineProperty()方法进行属性设置,然后手动触发响应式的更新。这样就可以确保在属性值变化时,相关组件能够得到自动更新。
相关问题
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 ]