用到reactive()写一个vue
时间: 2023-06-25 17:06:57 浏览: 50
首先,需要明确的是,Vue 和 React 是两个不同的框架,用不同的语法和方法来实现相似的效果。Vue 中的响应式数据是通过使用 `data()` 方法来创建的,而 React 中则需要使用 `useState()` 或 `useReducer()` 来实现。
如果你想在 Vue 中使用类似于 React 中的响应式数据,可以使用 Vue 3 中新增的 `reactive()` 函数。这个函数可以将一个普通的 JavaScript 对象转换成一个响应式的对象。下面是一个示例:
```javascript
import { reactive } from 'vue';
const state = reactive({
count: 0,
});
function increment() {
state.count++;
}
function decrement() {
state.count--;
}
```
在这个示例中,我们使用 `reactive()` 函数创建了一个名为 `state` 的响应式对象,它包含了一个名为 `count` 的属性,初始值为 0。然后,我们定义了两个函数 `increment` 和 `decrement`,用于增加和减少 `count` 的值。
在 Vue 3 中,可以直接在模板中使用响应式对象的属性,就像这样:
```html
<template>
<div>
<p>Count: {{ state.count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
});
function increment() {
state.count++;
}
function decrement() {
state.count--;
}
return {
state,
increment,
decrement,
};
},
};
</script>
```
在这个示例中,我们使用 `setup()` 方法来创建响应式对象和函数,然后将它们返回给模板中使用。在模板中,我们可以直接使用 `state.count` 属性显示计数器的值,并在按钮上使用 `@click` 监听器调用 `increment()` 和 `decrement()` 函数来增加或减少计数器的值。