vue3的ref、reactive、toRef、toRefs

用处：用于在setup中创建响应式变量

导出：import { ref, reactive, toRef, toRefs } from 'vue'

区别：

ref 用来定义基础数据类型，String, Number, Boolean, Symbol；通过 Object.defineProperty() 的get和set来实现响应式；js操作数据需要 .value，模版中读取不需要.value

reactive 用来定义对象或数组；通过 Proxy 来实现响应式，并通过 Reflect 操作源对象内部的数据；读写均不需要 .value

toRef 将 reactive 中的某个属性创建一个 ref 对象，const name = toRef(Person, 'name')

toRefs 将 reactive 中的所有属性创建成 ref 对象， ...toRefs(person)

例子：

<template>
　　<div class="demo">
　　　　<h2>姓名：{{ name }}</h2>
　　　　<h3>岗位：{{ job.type }}</h3>
　　　　<h3 v-show="job.age">年龄：{{ jbo.age }}</h3>
　　　　<button @click="updateInfo()">更新</button>
　　</div>
</template>
<script lang="ts">
　　import { defineComponent, ref, reactive } from 'vue'
　　export default defineComponent({
　　　　setup () {
　　　　　　let name = ref('张三')；
　　　　　　let job:any = reactive({
　　　　　　　　type: 'web前端',
　　　　　　　　workAge: 16
　　　　　　})
　　　　　　function updateInfo() {
　　　　　　　　name.value = '李四'
　　　　　　　　job.type = 'Java'
　　　　　　　　delete job.workAge
　　　　　　　　job.age = 18
　　　　　　}
　　　　　　return {
　　　　　　　　name,
　　　　　　　　job,
　　　　　　　　updateInfo
　　　　　　}
　　　　}
　　})
</script>

toRef 和 toRefs

setup () {
　　let person = reactive({
　　　　name: '张三',
　　　　job: {
　　　　　　j1: { age: 18 }
　　　　}
　　})
　　return {
　　　　person,
　　　　name1: person.name, //解构后模版中直接使用name，但是属性不再具有响应性
　　　　name2: toRef(person, 'name'), //通过toRef来转换成ref对象
　　　　...toRefs(person),  //批量转换成ref对象
　　}
}