Vue3.0-ref、reactive实现setup函数中的响应式数据

ref函数

ref函数可以让在setup函数中的数据实现响应式数据，其基本原理就是监听了value值的改变，然后劫持value的setter和getter函数。因此，如果实现的响应式数据，是一层又一层的引用数据的的话，会一直监听，劫持，这样效率就会非常的低下。所以，一般情况下ref函数实现的响应式数据就是基本数据。

引入：

import {ref} from "vue"

案例：

 这样就实现了点击按钮，在页面没有刷新的情况下，图片完成了切换。

reactive函数

reactive函数就是为了解决ref函数实现引用数据的响应式的时候的性能问题而设计出来的，因为reactiv实现响应式数据的底层原理就是es6中的proxy代理了整个引用数据

引入：import {reactive} from "vue"