vue3响应式数据声明
时间: 2023-10-04 13:05:49 浏览: 125
谈谈对vue响应式数据更新的误解
在Vue 3中,你可以使用`ref`和`reactive`函数来声明响应式数据。
1. `ref`函数用于声明一个基本类型的响应式数据。它会返回一个包装后的响应式对象,你可以通过`.value`来访问和修改它的值。
```vue
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
function updateMessage() {
message.value = 'Updated Message';
}
return {
message,
updateMessage
};
}
}
</script>
```
在上面的示例中,我们使用`ref`函数声明了一个名为`message`的响应式数据,并通过`.value`来访问和修改它的值。
2. `reactive`函数用于声明一个对象类型的响应式数据。它会将整个对象转换为响应式,并返回一个代理对象,你可以直接访问和修改它的属性。
```vue
<template>
<div>
<p>{{ person.name }}</p>
<p>{{ person.age }}</p>
<button @click="updatePerson">Update Person</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const person = reactive({
name: 'John',
age: 30
});
function updatePerson() {
person.name = 'Jane';
person.age = 25;
}
return {
person,
updatePerson
};
}
}
</script>
```
在上面的示例中,我们使用`reactive`函数声明了一个名为`person`的响应式对象,并直接访问和修改它的属性。
通过使用`ref`和`reactive`函数,你可以在Vue 3中方便地声明响应式数据,并在模板中进行双向绑定或者在逻辑代码中进行操作。
阅读全文