defineReactive
时间: 2023-10-07 20:06:02 浏览: 17
`defineReactive`是一个函数,它的作用是将一个对象的属性转化为可观测的,当该属性发生变化时,会自动触发相应的响应式更新。
具体实现思路是通过 `Object.defineProperty` 方法对属性进行劫持,当属性被读取时,会触发 `get` 方法,当属性被修改时,会触发 `set` 方法,从而实现对属性的监听和响应式更新。
一个简单的 `defineReactive` 实现如下:
```javascript
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
return val
},
set: function reactiveSetter(newVal) {
if (newVal === val) return
val = newVal
// 触发响应式更新
// ...
}
})
}
```
其中,`obj` 表示要监听的对象,`key` 表示要监听的属性名,`val` 表示属性的初始值。通过 `Object.defineProperty` 方法对属性进行劫持,当属性被读取时返回其值,当属性被修改时判断新旧值是否相等,如果不相等则更新属性值并触发响应式更新。
相关问题
vue.util.defineReactive
vue.util.defineReactive是Vue.js中的一个工具函数,用于定义响应式数据。它接受三个参数:对象、属性名和初始值。当对象的属性值发生变化时,会自动触发视图的更新。这个函数是Vue.js实现响应式数据的核心之一。
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对象进行更新。
代码示例:
```javascript
// 在Vue实例中使用this.$set方法设置响应式属性
this.$set(this.obj, 'key', 'value');
```