vue3ref的使用

在Vue 3中，ref是一个函数，用于创建一个响应式的引用对象。ref函数可以用于在setup函数中创建响应式的数据。

使用ref函数时，它会返回一个响应式对象，该对象有一个.value属性，用于访问和修改其值。当你改变.value的值时，Vue会自动追踪这个变化，并在需要时更新视图。

下面是使用ref的示例：

<template>
  <div>
    <p>计数: {{ count.value }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 创建一个响应式引用对象
    const count = ref(0);
 
    // 创建一个函数用于增加计数
    const increment = () => {
      count.value++;
    };
 
    // 返回响应式数据和方法
    return {
      count,
      increment,
    };
  },
};
</script>

在上面的例子中，我们使用ref函数来创建一个响应式的引用对象count，并初始化其值为0。然后，我们使用increment方法来增加count的值，注意我们访问count时需要使用.value来获取其值。

ref还有一个 shallowRef函数，用于创建一个非深层次的响应式引用对象。在shallowRef下，如果对象的属性变化，Vue只会追踪对象本身的改变，而不会递归地追踪对象内部属性的改变。这在处理复杂对象时可能会有一些性能上的优势。

例如：

<template>
  <div>
    <p>用户信息：</p>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>
 
<script>
import { shallowRef } from 'vue';
 
export default {
  setup() {
    // 创建非深层次的响应式引用对象
    const user = shallowRef({
      name: 'John',
      age: 30,
    });
 
    // 模拟异步修改用户信息
    setTimeout(() => {
      // 这里改变user对象本身，不会追踪对象内部属性的改变
      user.value = {
        name: 'Jane',
        age: 28,
      };
    }, 2000);
 
    return {
      user,
    };
  },
};
</script>

在这个示例中，我们使用shallowRef来创建非深层次的响应式引用对象user。在定时器的回调函数中，我们更新了user对象本身，而不是更新对象内部的属性。由于使用了shallowRef，Vue不会追踪对象内部属性的改变，因此视图不会在属性改变时更新。

总结：ref和shallowRef是Vue 3中用于创建响应式数据的函数。ref可以用于创建普通的响应式数据，而shallowRef用于创建非深层次的响应式引用对象。在setup函数中使用ref或shallowRef可以确保创建响应式数据，以便在组件中正确地追踪数据的变化并更新视图。