Vue3 数据响应式

在vue3中一般返回的数据是不响应的，如果需要响应式需要在定义时声明
方法1：reactive（）：
        定义：reactive（）是一个函数，可以用来定义复杂数据类型完成响应式
        案例：
                

{{userInfo.name}}
//4，结果打印Cat

方法2：toRef（）：
        定义：当我们在渲染数据时，不希望用到前缀时，可以使用组合toRef（）
             toRef（）是函数，转换响应式对象中的某个属性为单独响应式数据，他们之间依然相互绑定
        案例：
        

{{name}}
//先打印Vue2
修改
//点击后打印Vue3

方法3：toRefs（）：
        定义：可以定义转换响应式对象中所有属性为响应式数据，通常用于结构reactive定义的对象，转换响应式对象中所有属性（也可以是一部分）为单独响应式数据，对象成为普通对象，且数据关联
        案例：

        

姓名：{{name}}
年龄：{{age}}
修改信息

方法4：ref（）：
        定义：ref（）是一个函数，用来定义简单类型数据响应式
        注意：
                1）在修改值和获取值时需要用.value
                2）在渲染数据时可以省略.value
        案例：
                

{{name}}
修改

ref也可以用于对象或数组