Vue 3.0 ref 和reactive 区别

ref的使用

ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式特性(reactivity)的数据类型，原始数据类型共有7个，分别是：

• String

• Number

• Boolean

• Null

• Undefined

• Symbol : 它用来生成一个独一无二的值，它Symbol数据常用来给对象属性赋值，让对象属性具备唯一性，不容易被覆盖。

• BigInt : 解决精度缺失的问题,提供了一种方法来表示大于2^53-1的整数。BigInt可以表示任意大的整数

相比于Vue2，用ref的好处就是传值时可以不用再写this

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ title }}</h1>
  <button @click="handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const title = ref("你好, Vue3！");
    const handleClick = () => {
      title.value = "数据来了";
    };
    return { title, handleClick };
  },
});
</script>

reactive的使用

Vue3提供了一个方法：reactive （等价于Vue2中的Vue.observable() ）来赋予对象(Object) 响应式的特性，那么我们可以将上述代码用对象的形式改写为：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ data.title }}</h1>
  <button @click="data.handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      title: "你好, Vue3",
      handleClick: () => {
        data.title = "数据来了";
      },
    });
    return { data };
  },
});
</script>

toRefs的作用 省去data

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>{{ title }}</h1>
  <button @click="handleClick">✌</button>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      title: "你好, Vue3",
      handleClick: () => {
        data.title = "数据来了";
      },
    });
    const dataAsRefs = toRefs(data);
    /*
    Type of dataAsRefs:
    {
        title: Ref<string>,
        handleClick: Ref<() => void>
    }
    */
    return { ...dataAsRefs };
  },
});
</script>   

总结

ref 和 reactive 一个针对原始数据类型，而另一个用于对象，这两个API都是为了给JavaScript普通的数据类型赋予响应式特性(reactivity)。

使用 ref 还是 reactive 可以选择这样的准则

第一，就像刚才的原生 javascript 的代码一样，像你平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性。