Vue学习笔记：VCA中使用reactive ref toRef toRefs

本文主要记录在 Composition API （VCA）中使用reactive ref toRef toRefs

在 Vue 3 中，"ref" 和 "reactive" 是用于处理响应式数据的两种不同方式。

ref

"ref" 是 Vue 3 中的一个函数，它用于创建一个响应式引用（reactive reference）来包装基本数据类型（如数字、字符串等）或非响应式对象。"ref" 函数返回一个包装后的响应式对象，可以通过 ".value" 属性来访问和修改其值。当你想要在模板或组件中使用基本数据类型作为响应式数据时，通常会使用 "ref"。

示例

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

注意：在使用ref包装后的对象，如果要在script中使用其值需要返回value，详见像文中increment。但是在template中则可以直接使用。

reactive

"reactive" 是 Vue 3 中的另一个函数，它用于创建一个响应式代理（reactive proxy）来包装普通的 JavaScript 对象。"reactive" 函数返回一个代理后的响应式对象，它会跟踪对象属性的变化，使得当对象属性变化时，能够自动触发相关的更新。

<template>
    <div>
      <p>{{ person.name }}</p>
      <p>{{ person.age }}</p>
      <button @click="incrementAge">Increment Age</button>
    </div>
  </template>
  
  <script>
  import { reactive } from 'vue';
  
  export default {
    setup() {
      const person = reactive({
        name: 'Alice',
        age: 30,
      });
  
      const incrementAge = () => {
        person.age++;
        console.log(person.age)
      };
  
      return {
        person,
        incrementAge,
      };
    },
  };

toRef toRefs

toRef 和 toRefs 是用于在 Composition API 中处理响应式数据的两个函数。

toRef：

toRef 函数用于将响应式对象的某个属性转换为一个单独的 ref。这个 ref 将保持与原始属性的响应式关联，即当原始属性变化时，ref 也会自动更新。toRef 是用于将嵌套属性转换为 ref 的一种方式。

toRefs 函数用于将一个响应式对象的所有属性转换为 ref，并返回一个新的对象，这样可以在解构对象时保持响应式。

<template>
    <div>
        {{ year }} - {{ month }} - {{  day }} 
      <p>{{ name }}</p>
      <p>{{ age }}</p>
      <button @click="incrementAge">Increment Age</button>
    </div>
  </template>
  
  <script>
  import { reactive, toRef, toRefs } from 'vue';
  
  export default {
    setup() {
      const person = reactive({
        name: 'Alice',
        age: 30,
      });
      const date = reactive({
        year:'2008',
        month:'08',
        day:'08'
      })
  
      const incrementAge = () => {
        person.age++;
        console.log(person.age)
      };
  
      return {
        ...toRefs(person),
        year:toRef(date,'year'),
        month:toRef(date,'month'),
        day:toRef(date,'day'),
        incrementAge,
      };
    },
  };
  </script>

这里使用toRefs时使用了"..." ，称为"扩展运算符"（Spread Operator）或"剩余参数"（Rest Parameters），它用于处理数组和对象的展开和合并操作。