vue的reactive详解
时间: 2023-07-24 14:12:36 浏览: 59
Vue.js 中的响应式系统是其核心特性之一,它通过利用 ES6 的 Proxy 和 Reflect 对象,实现了数据变化自动响应。
在 Vue.js 中,通过调用 `Vue.observable()` 方法,可以将一个普通的 JavaScript 对象转换为响应式对象。例如:
```
const state = Vue.observable({
count: 0
})
```
现在,`state` 对象已经成为了一个响应式对象,我们可以像访问普通对象一样访问它的属性,例如 `state.count`。
当我们修改 `state.count` 的值时,Vue.js 会自动检测到数据的变化,并触发更新视图的操作。例如:
```
state.count++
```
Vue.js 会自动更新视图,显示最新的 `state.count` 值。
在 Vue.js 中,响应式对象的实现依赖于 ES6 的 Proxy 和 Reflect 对象。通过使用 Proxy 对象,我们可以在对象的属性被读取、写入、删除等操作时,拦截这些操作并触发相应的副作用。例如:
```
const handler = {
get(target, key, receiver) {
console.log(`Getting ${key}!`)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
console.log(`Setting ${key} to ${value}!`)
return Reflect.set(target, key, value, receiver)
}
}
const obj = {
foo: 'bar'
}
const proxy = new Proxy(obj, handler)
proxy.foo // 输出 "Getting foo!"
proxy.foo = 'baz' // 输出 "Setting foo to baz!"
```
通过使用类似的方式,Vue.js 实现了对响应式对象的拦截和触发更新的操作。这个过程中,Vue.js 会维护一个依赖关系图,用于记录组件和数据之间的关系,并在数据变化时自动更新相关的组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)