ref全家桶

ref()接受一个内部值，返回一个响应式的、可更改的ref对象，这个对象只有一个指向其内部值的属性.value(这是vue3官方文档的解释）

一、ref的作用

1.1在HTML元素上设置ref

目的是获取这个DOM元素，然后就可以直接操作DOM

• 给元素设置一个ref属性，这样在视图编译的时候，会把创建的真是DOM
• 以ref属性值作为成员
• 真是DOM元素作为成员值
• 赋值给实例的$refs对象

  $refs = {
              btn : button这个DOM元素
          }
      <button ref="btn">我是子组件的按钮</button>
  
  
  
     <!-- 给循环创建的元素设置相同的ref属性值，最后其存储所有的DOM元素 -->
      <div class="box" v-for="(item, index) in 5" :key="index" ref="box">
        {{ item }}
      </div>
  
      <!-- 循环创建元素&&动态绑定ref属性值：$refs对象中会有box1~5这几个成员，分别存储每一个DOM元素(值是数组,数组只有一项) -->
      <!-- <div
        class="box"
        v-for="(item, index) in 5"
        :key="index"
        :ref="`box${index + 1}`"
      >
        {{ item }}
      </div> -->

  1.2给子组件设置ref

• 目的使获取子组件的实例，这样就可以调用子组件实例上的数据和方法
• 如果子组件是functional函数组件，获取的值是undefined

二、isRef()判断一个值是否为ref

import { ref} from 'vue';

const count = ref(0);
console.log(
  isRef(count) ? 1 : 0
);

三、unref()，如果一个参数是ref，则返回内部值，否则返回参数本身

val = isRef(val) ? val.value : val

四、toRef()基于响应式对象上的一个属性，创建一个对应的 ref

• toRef()函数将一个响应式对象的每个属性都转换成一个独立的响应式引用（ref）
• 转换后的ref与源属性保持同步；改变ref值源属性上的值也改变，反之亦然
• 在使用toRef()时需要源对象和属性作为参数

import { reactive, toRef } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      title: 'Hello Vue 3'
    });

    // 将 state 中的 title 属性转换为响应式引用
    const titleRef = toRef(state, 'title');

    function increment() {
      state.count++;
    }

    // 返回响应式引用和方法
    return { titleRef, increment, count: toRef(state, 'count') };
  }
}

五、toRefs()将一个响应式对象转换为一个普通对象

• 转换后对象的每个属性都是一个独立的ref()对象
• 当需要将一个响应式对象的属性分散到多个组件或多个局部变量中，并且希望这些属性都保持响应性时，使用 toRefs() 非常有用
• 需要从 reactive 对象中解构多个属性，并希望这些属性保持响应性时。如果直接解构，原始的响应性会丢失，但使用 toRefs 则可以保持这种响应性。

  import { reactive, toRefs } from 'vue';
  
  setup() {
    const state = reactive({
      count: 0,
      title: 'Hello'
    });
  
    // 转换 state 对象，使其属性成为独立的响应式引用
    const refs = toRefs(state);
  
    return {
      ...refs
    };
  }
  

  六、toValue()将值、refs 或 getters 规范化为值

• 对值的处理：如果传入的是一个普通值，toValue() 直接返回这个值。
• 对 Ref 的处理：如果传入的是一个 Vue 的 Ref 对象，它会返回 Ref 的 .value 属性。
• 对函数的处理：如果传入的是一个函数（通常是一个 getter 函数），toValue() 会执行这个函数，并返回执行结果。这也是与unref()的区别

  import { toValue } from 'vue';
  
  function useFeature(id) {
    watch(() => toValue(id), id => {
      // 处理 id 变更
    });
  }
  
  // 使用示例
  useFeature(1);
  useFeature(ref(1));
  useFeature(() => 1);