详细分析Vue3中的ref（附Demo）

前言

由于新项目涉及Vue3，本着探究问题的本质研究所不会的疑问

1. 基本知识

ref 是 Vue 3 中用于创建响应式数据的函数

接收一个初始值并返回一个包含了该值的响应式引用对象
与 Vue 2.x 中的 data 属性不同，ref 返回的是一个对象，而不是一个直接的值

主要的用法如下：

import { ref } from 'vue';// 创建一个 ref
const count = ref(0);// 读取 ref 的值
console.log(count.value); // 输出：0// 修改 ref 的值
count.value++;
console.log(count.value); // 输出：1

具体的作用如下：

创建响应式数据：通过 ref 创建的数据是响应式的，当数据发生变化时，相关的视图会自动更新
引用数据的访问和修改： .value 属性可以访问和修改 ref 的值
这种方式让数据的访问和修改更加直观和一致
在模板中使用：可以直接在模板中使用 ref 创建的响应式数据，而不需要像 Vue 2.x 中一样通过 this 访问
跟踪数据变化：Vue 3 中的 ref 通过 ES6 的 Proxy 实现，能够跟踪数据的读取和修改，从而实现数据的响应式更新

2. Demo

示例简易的Demo如下：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 创建一个 refconst count = ref(0);// 定义一个增加 count 的方法const increment = () => {count.value++;};// 返回模板中需要用到的数据和方法return {count,increment,};},
};
</script>