如何使用ref和reactive你必须要知道的场景和差异

news/2024/11/17 21:39:47/

在Vue 3中，ref和reactive是两种不同的数据响应式处理方式。本文将介绍它们的使用场景和差异，并提供相关代码示例。

ref的使用场景

ref通常用于处理简单的数据类型，例如数字、布尔值、字符串等。它可以让我们在模板中直接使用数据，而不需要使用{{}}语法。

下面是一个ref的示例代码：

<template><div><p>{{ count }}</p><button @click="increment">+</button></div>
</template><script>
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {count.value++}return {count,increment}}
}
</script>

在这个示例中，我们使用ref创建了一个名为count的变量，并将其初始值设置为0。在模板中，我们可以直接使用count变量，并在按钮的点击事件处理函数中使用count.value进行修改。

reactive的使用场景

reactive通常用于处理复杂的数据类型，例如对象和数组。它可以让我们轻松地监听对象和数组的变化，并在模板中使用它们。

下面是一个reactive的示例代码：

<template><div><p>{{ user.name }}</p><p>{{ user.age }}</p><button @click="incrementAge">Increment Age</button></div>
</template><script>
import { reactive } from 'vue'export default {setup() {const user = reactive({name: 'John',age: 30})function incrementAge() {user.age++}return {user,incrementAge}}
}
</script>