vue3 $ref

// 使用 Vue 3 的 ref 创建响应式引用

// 引入 Vue 和 ref 函数
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 创建一个名为 count 的响应式引用，初始值为 0
    const count = ref(0);

    // 定义一个方法来增加 count 的值
    const increment = () => {
      count.value++; // 注意：访问和修改 ref 的值时需要使用 .value
    };

    // 在组件挂载后执行的钩子函数
    onMounted(() => {
      console.log('Component is mounted!');
    });

    // 返回给模板使用的变量和方法
    return {
      count,
      increment
    };
  }
};

解释说明：

• ref 是 Vue 3 中用于创建响应式数据的方法。它返回一个包含 .value 属性的对象，该属性可以被追踪变化。
• 在模板中使用 ref 创建的变量时，Vue 会自动解包 .value，因此可以直接使用变量名（如 count），但在 JavaScript 代码中（如在 setup 函数或方法中），需要通过 .value 来访问和修改它的值。
• onMounted 是 Vue 3 的生命周期钩子，当组件挂载完成后会触发该钩子中的回调函数。