目录
- 1、ref
- 2、computed
- 3、reactive
- 4、toRefs
- 总结
setup函数中拿不到vue的this
1、ref 本质为一个函数，输入参数为一个值（原始类型），返回响应式的对象
2、computed 【vue3的ref|vue3的ref,computed,reactive和toRefs你都了解吗】本质为一个函数，输入参数是一个函数，可以将我们需要的值作为输入函数的返回值
例子：实现点击按钮，屏幕上的数加1
文章图片
{{count}}{{double}}
3、reactive 本质为一个函数，接受一个object作为传入参数
上述代码在setup函数中，有很多响应式数据，它们都是分散的，我们可以使用reactive将它们都包裹起来。输出对象类型，模板中需要用data.属性取出来。
文章图片
{{data.count}}{{data.double}}
上述代码在运行时会报错，data数据类型会出错，这是因为内部的computed函数造成的data类型推论循环，需要解决。可以手动设置一个数据类型赋给data。
interface dataProps{count:number,double:number,increase:()=>void}
继续修改上述代码，发现模板中每次使用数据都需要data.属性才能取出来，能不能直接用属性？这时我们想到了es6的...展开符，但是更改后发现点击按钮，屏幕上的数字不发生变化了，数据不是响应式的了。
这是因为这种方式返回的数据都是普通的js数据类型，并不是响应式的ref数据类型，因此我们需要新的方法。
4、toRefs 本质为一个函数，接受一个reactive函数作为输入参数，返回一个ref类型的对象。
文章图片
{{count}}{{double}}const refData = https://www.it610.com/article/toRefs(data)return{//要在外面使用的变量都要先通过return导出，才能使用...refData}
这时，我们展开refData，就能实现响应式了。
总结 本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
