【Vue3】深入理解Vue中的ref属性

在Vue 3中，ref是一个函数，用于创建一个响应式的引用对象（reactive reference），可以用来跟踪单个响应式值。这个引用对象可以被传递并在应用的不同组件之间进行响应式传递。

ref的基本使用方法如下：

import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    return {
      count
    };
  }
};

在模板中使用ref：

<template>
  <div>{{ count }}</div>
  <button @click="count++">Increment</button>
</template>

如果需要在JavaScript中访问ref的值，可以通过.value属性。如果需要改变ref的值，也是通过.value属性。

// 访问ref的值
console.log(count.value);
 
// 改变ref的值
count.value++;

ref可以用于响应式地跟踪任何数据类型，包括对象和数组。

const obj = ref({ name: 'Vue' });
obj.value.name = 'Vue 3';

在模板中，不需要使用.value来访问ref，Vue 3的模板会自动解包ref。

<template>
  <div>{{ obj.name }}</div>
</template>

在组合式API（Composition API）中，ref是一个非常重要的概念，它允许我们在多个函数之间共享状态，而不需要使用props和emit。