Vue 的响应式数据 ref的使用

ref 是 vue 提供给我们用于创建响应式数据的方法。

ref 常用于创建基本数据，例如：string、number、boolean 等。

ref 还是通过 Object.defineProperty 的 get 与 set 方法，实现的响应式数据。

ref 创建基本数据：

<template><p>商品数量：{{ num }}</p><button @click="addNum">增加</button>
</template><script>
// 引入 ref 函数
import { ref } from 'vue'
export default {name: "Home",setup() {// 使用 ref 创建基本数据const num = ref(0);// 创建方法const addNum = () => {num.value++;// 返回的是一个对象，我们需要的值在 value 属性中console.log(num);}// 返回数据return {num,addNum}}
}
</script>

通过 ref 创建的数据是一个对象的格式，其中的 value 属性才是我们需要的值，所以在 script 标签中，需要通过 value 属性才能使用或修改 ref 数据。

注：在 template 模板中不需要写 value ，因为 template 模板会自动识别 ref 数据。

ref 创建引用数据【不推荐】：

<template><p>姓名：{{ info.name }}</p><p>年龄：{{ info.age }}</p><p>性别：{{ info.sex }}</p><button @click="editInfo">修改信息</button>
</template><script>
// 引入 ref 函数
import { ref } from 'vue'
export default {name: "Home",setup() {// 使用 ref 创建引用数据const info = ref({name: "张三",age: 20,sex: "男"});// 创建方法const editInfo = () => {info.value.name = "李四";info.value.age = 22;info.value.sex = "女";// info.value 是一个 proxy 对象，proxy 对象内的数据可以直接使用console.log(info.value);}// 返回数据return {info,editInfo}}
}
</script>

ref 也可以创建引用数据。并且在获取第一层数据时，需要使用 value 属性，之后的数据可以直接使用。