Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结

以下是Vue中ref、reactive、toRef、toRefs、$refs的完整攻略：

1. ref

ref 可以将组件或DOM元素在父组件中进行标识。同时，也可以在父组件中使用 $refs 访问到子组件或DOM元素。使用ref的方式如下:

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

在组件中，通过this.$refs.input就能获取到该dom节点。

2. reactive

reactive可以定义响应式数据，这样我们可以使用解构赋值或之前的方法去引用响应式属性。

import { reactive } from "vue";

const state = reactive({
  count: 0,
  width: 500,
  height: 300,
});

3. toRefs

如果我们想将 reactive 中的响应式属性进行分解成独立的属性，toRefs 就能够将 reactive 对象中的所有属性都变成了 ref 数据类型的变量。

import { reactive, toRefs } from "vue";

const state = reactive({
  count: 0,
  width: 500,
  height: 300,
});

// 将响应式属性转化为单一的 Refs
const stateRefs = toRefs(state);

toRefs 可以使 state 变成响应式的同时，将 reactive 对象变成了普通对象，从而让其属性能够被直接解构。

const App = {
  setup() {
    const { count, width, height } = toRefs(reactive({
      count: 0,
      width: 500,
      height: 300
    }))

    // ...

4. toRef

toRef允许我们在reactive学习中使用单一的响应式属性。

import { reactive, toRef } from "vue";

const state = reactive({
  count: 0,
});

// 将count属性从响应式中转化为单一的 Ref
const countRef = toRef(state, "count");

这样我们就可以通过 countRef 操作 count 这个响应式数据。

5. $refs

$refs 是用于获取子组件或DOM元素的引用。它是Vue自带的一个属性，可以在组件中通过 ref 属性定义DOM元素或子组件实例，进而在组件中方便地进行引用。

下面是一个例子：

<template>
  <div>
    <button ref="button">点击</button>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$refs.button.addEventListener("click", () => {
        console.log("clicked");
      });
    }
  }
</script>

在上述代码中，我们在 template 中定义了一个 button 元素，使用 ref="button" 给它起了个名字，随后在 mounted() 生命周期钩子函数中，通过 this.$refs.button 获取到了这个元素，并添加了一个监听事件，当点击 button 元素时会输出clicked。

至此，Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结已经介绍完毕。