Vue3中的ref为何要用.value进行值的调用呢

在Vue3中，ref用作响应式数据的定义和访问，但其访问方式与Vue2.x有所不同，需要使用 .value 属性来访问具体的值。

这是因为 Vue3.x 中的响应式系统使用了 ES6 的 Proxy，而 .value 非常巧妙地利用了 ES6 Proxy 的 get 和 set 方法。每个 ref 对象本身其实不是一个值，而是一个包含一个值的对象，并且这个值可以被 get 和 set 方法监听到从而触发响应式更新。

下面是两个示例：

示例一：

<template>
  <div>
    <p>当前计数为：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

在这个示例中，我们用 ref(0) 定义了一个初始值为 0 的计数器，然后使用 count.value 调用它的值，并且在按钮点击事件中使用 count.value++ 更新计数，从而触发响应式更新。

示例二：

<template>
  <div>
    <p>您的名字是：{{ name }}</p>
    <input v-model="name">
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('');

    return {
      name: name.value,
    };
  },
};
</script>

在这个示例中，我们使用 ref('') 定义了一个初始值为空字符串的名字，然后在模板中使用 name 访问它的值，在 <input> 标签中使用 v-model="name" 双向绑定用户输入，从而实现了一个简单的输入框。由于 name 本身不是响应式的，在返回数据对象时需要使用 name.value 调用它的值，这样才能实现响应式更新。

综上所述，Vue3中的ref需要使用.value进行值的调用是因为其内部实现搭载了ES6 Proxy的get和set方法，.value实际上是封装了取值和赋值的操作，在使用时需要调用该属性才能触发响应式更新。