在Vue2中,被传入的对象会直接被Vue.observable变更,它和被返回的对象是同一个对象;Vue3中,会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的,各写一个列子说明
时间: 2024-03-21 22:38:13 浏览: 116
好的,我来分别给你举例说明。
Vue2中的示例:
```javascript
import Vue from 'vue'
const obj = {
count: 0
}
const observableObj = Vue.observable(obj)
// 修改observableObj中数据会直接影响到源对象obj
observableObj.count++
console.log(obj.count) // 输出1
```
在Vue2中,我们可以使用`Vue.observable`方法将一个对象转换为可响应对象。在上面的示例中,我们创建了一个`obj`对象,并将其转换为可响应对象`observableObj`。当我们修改`observableObj`中的数据时,源对象`obj`中的数据会直接被修改。
Vue3中的示例:
```javascript
import { reactive } from 'vue'
const obj = {
count: 0
}
const reactiveObj = reactive(obj)
// 修改reactiveObj中数据会响应式更新视图
reactiveObj.count++
console.log(obj.count) // 输出0
```
在Vue3中,我们可以使用`reactive`函数将一个对象转换为可响应代理对象。和Vue2不同的是,在Vue3中对源对象的直接变更是不会触发响应式更新的,而是需要通过可响应代理对象来修改数据。在上面的示例中,我们创建了一个`obj`对象,并将其转换为可响应代理对象`reactiveObj`。当我们修改`reactiveObj`中的数据时,视图会响应式更新,但源对象`obj`中的数据不会被修改。
阅读全文