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 对象属性保持响应性。
