vue.reactive方法
时间: 2024-01-13 21:19:20 浏览: 27
Vue 3中引入了`reactive`函数,用于创建响应式的数据对象。它接收一个普通的JavaScript对象,并返回一个响应式的代理对象。当代理对象的属性发生变化时,相关的视图会自动更新。
以下是一个使用`reactive`方法创建响应式数据对象的示例:
```javascript
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello Vue!',
});
console.log(state.count); // 输出:0
console.log(state.message); // 输出:Hello Vue!
state.count++; // 修改count属性的值
state.message = 'Hello World!'; // 修改message属性的值
console.log(state.count); // 输出:1
console.log(state.message); // 输出:Hello World!
```
在上面的示例中,我们使用`reactive`函数创建了一个名为`state`的响应式数据对象。我们可以像访问普通对象一样访问`state`对象的属性,并且当属性的值发生变化时,相关的视图会自动更新。
需要注意的是,`reactive`函数只能用于Vue 3及以上版本。如果你在Vue 2.x中使用`reactive`函数,会出现类似于"Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_20__.reactive is not a function"的错误。