66. ref和reactive区别
在 Vue3 中，ref和reactive都是用于创建响应式数据的 API，二者的本质区别在于：
-
ref用于创建一个简单的响应式数据，即一个基本类型的数据，比如数字、字符串等，它会将这个基本类型数据包装成一个响应式对象，并且返回一个带有.value属性的对象。这样，我们在对这个响应式对象进行读取或修改时，就可以直接使用.value来访问或修改它的值。 -
reactive用于创建一个复杂的响应式数据，即一个对象或数组。它会将这个对象或数组的所有属性或元素都转化为响应式数据，并返回一个响应式对象。我们在对这个响应式对象进行读取或修改时，可以直接使用点操作符或数组下标来访问或修改它的属性或元素。
下面是一个使用ref和reactive创建响应式数据的示例代码，用于展示二者之间的区别：
<template><div><p>count: {{ count.value }}</p><button @click="increment">increment</button><p>person: {{ person.name }}, {{ person.age }}</p><button @click="updatePerson">update person</button></div>
</template><script>
import { ref, reactive } from 'vue';export default {setup() {// 使用 ref 创建一个响应式的基本类型变量const count = ref(0);// 使用 reactive 创建一个响应式的对象const person = reactive({name: 'Alice',age: 20,});// 点击按钮，修改 countconst increment = () => {count.value++;};// 点击按钮，修改 personconst updatePerson = () => {person.name = 'Bob';person.age = 30;};return {count,person,increment,updatePerson,};},
};
</script>
在上述代码中，我们使用ref创建了一个响应式的基本类型变量count，并在点击按钮时修改了它的值。使用reactive创建了一个响应式的对象person，并在点击按钮时修改了它的属性值。注意到访问ref变量的值需要使用.value，而访问reactive变量的属性值则可以直接使用点操作符。
本文链接：https://my.lmcjl.com/post/2748.html
展开阅读全文
4 评论