Vue 响应式的引用的原理，通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新。
一、ref
1、作用:
接受一个内部值并返回响应式且可变的ref对象。ref对象具有指向内部值的单个property. value。
ref需要从Vue中引入才能使用;
ref一般定义基础数据类型;
通过ref包装后需要通过value属性获取，proxy封装后变为proxy({value：值};
模板中使用数据时,会自动的调用value属性,不需要使用value;
二、reactive
1、作用：
接受一个内部值并返回响应式且可变的对象;
reactive需要从Vue中引入才能使用;
reactive一般定义非基础数据类型;
通过reactive包装数据，也就是proxy封装后变为proxy（数据）
2、示例
3、数据 解构
1）如果解构数据是引用数据类型，解构后仍然是响应式的，参考如下：
解构后的title值也是用proxy包装的
所以reactive也会将引用类型值进行proxy包装，这样解构后仍然是响应式的。
1）如果解构数据的值是基本数据类型，那么解构之后再返回不具备响应式，如下：
这时候就可以通过toRefs来包装。
三、toRefs
1、toRefs原理：{title:’hello’} 通过reactive包装后会变为proxy({title:’hello’}) ，再次通过toRefs包装后会变为proxy({title:proxy({value:’hello’})})
2、示例：
上面截图中toRefs在改变数据之后使用，如果toRefs在改变数据前使用，那么就需要通过value属性获取，因为proxy封装的时候变为了value.
toRefs封装，如果响应式数据中本身不存在某个数据，那么不会给一个默认的引用，而是给一个undefined,不具备响应式，参考如下：
如果想给一个默认引用，可以使用toRef方法。
四、toRef
1、原理：toRef方法不需要解构，两个参数，一个总数据，一个获取的数据，这样2s后页面中由没有数据变成‘walk’
2、示例：
结束啦。
今日寄语：
只要你勇敢地说出再见，生活一定会赐予你一个新的开始。
