详细分析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() {
    // 创建一个 ref
    const count = ref(0);

    // 定义一个增加 count 的方法
    const increment = () => {
      count.value++;
    };

    // 返回模板中需要用到的数据和方法
    return {
      count,
      increment,
    };
  },
};
</script>

在实战中常用如下：