Vue3 ref函数详解

在Vue 3中，ref() 函数是用来创建一个响应式的引用对象（reactive reference）的。这个函数通常用于跟踪单个响应式值。

ref() 函数接收一个内部值，并返回一个响应式的对象，该对象包含一个 .value 属性。你可以使用 .value 属性来访问或修改内部值。

下面是一个简单的例子：

import { ref } from 'vue';
 
const count = ref(0);
 
console.log(count.value); // 输出：0
 
count.value++;
console.log(count.value); // 输出：1

ref() 函数确保其返回的对象是深度响应式的，这意味着它可以跟踪内部值的变化，并且这些变化会被Vue的响应式系统自动跟踪和更新。

在模板中，你可以直接绑定这个引用的 .value 属性，无需在模板内显式使用 .value：

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return { count, increment };
  }
}
</script>

在上面的例子中，count 是一个响应式的引用，模板中直接使用 count 来显示当前的数值，通过点击按钮触发 increment 方法来增加计数。