用处：用于在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对象
}
}