vue3 新增了许多新的api。例如：ref, reactive toRef,toRefs。
来具体的区分一下它们之间有什么区别，及作用
给自定义数据添加响应式
ref
作用：给基本数据类型添加响应式引用
const name = ref("张三");
name 就从此变成了响应式数据
reactive
作用：给非基本数据类型添加响应式引用
const obj = reactive({ name: "old" });
显而易见，ref 和 reactive 是一对。一个处理基本数据类型，一个处理引用数据类型。
给参数添加响应式
使用 setup 函数时，它将接收两个参数：
- props
- context
在setup 函数中的 props 是响应式的，当传入新的 prop 时，prop就会相应的更新。
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
但是，因为 props 是响应式的，不能使用 ES6 解构，解构会消除 prop 的响应性。那我非得要解构，怎么做呢？
为了解决这个问题，Vue3 提供了2个ApitoRef 和 toRefs
toRefs给props 添加响应式应用，且支持解构
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}
还有一个问题，props中有些参数不是必填的，这个时候用toRefs就不好使了，只能用toRef给参数添加响应式引用了
setup函数的第二个参数context
context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：
export default {
setup(props, context) {
// Attribute (非响应式对象，等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象，等同于 $slots)
console.log(context.slots)
// 触发事件 (方法，等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
console.log(context.expose)
}
}
context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。
侦听器 (watch & watchEffect)
watch
1能拿到原始值和当前值
2能监听多个数据变化
const name = ref("张三");
watch(name, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
const obj = reactive({ name: "张三" });
watch(
() => obj.name,
(newValue, oldValue) => {
console.log(newValue, oldValue);
}
);
watchEffect
1不需要传递侦听的内容，watchEffect会自动感知代码依赖， 不需要传递很多参数仅仅需要一个回调函数
2不能获取之前的值
const name = ref("old");
watchEffect(() => {
console.log("name change", name.value);
});
setTimeout(() => {
name.value = "new";
}, 2000);
