reactive
返回对象的响应式副本
const obj = reactive({ count: 0 })
响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy，避免依赖原始对象。
ref
接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。
实际使用中也可以包裹对象。官方推荐我们在定义数据的时候,reactive定义复杂的数据类型的数据,ref推荐定义基本数据类型。就是需要注意内部访问的值不一样。ref类型在底层会自动转换成reactive类型
ref的本质是拷贝，与原始数据没有引用关系
toRef
可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新，但解构后就可以关联。
toRefs
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。
希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，就可以使用toRefs，但解构后就可以关联。用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据)
toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>ref方式</p>
<p>名称：{{ obj.name }}</p>
<p>数量：{{ obj.count }}</p>
<p>reactive方式</p>
<p>名称：{{ obj1.name }}</p>
<p>数量：{{ obj1.count }}</p>
<p>toRefs方式</p>
<p>名称：{{obj2.name }}</p>
<p>数量：{{ obj2.count }}</p>
<p>toRefs解构方式</p>
<p>名称：{{name }}</p>
<p>数量：{{ count }}</p>
<button @click="obj.count++">ref方式增加</button>
<button @click="obj1.count++">reactive方式增加</button>
<button @click="obj2.count++">toRefs增加</button>
<button @click="count++">toRefs解构增加</button>
<button @click="change">setup内增加</button>
<button-btn></button-btn>
</div>
<script>
const { reactive, computed, watch,toRefs,toRef,ref } = Vue
let options = {
setup() {
const obj = ref({ count: 1,name:"orgin" })
const obj1 = reactive({ count: 1,name:"orgin" })
obj.value.count = 3
console.log(obj.value.count)
const obj2 = toRefs(obj1)
console.log(obj,obj1,obj2)
function change(){
obj2.name.value = 'apple';
obj2.count.value++;
console.log(obj1,obj2)
}
return {
obj,
obj1,
obj2,
...obj2,
change
}
}
}
const app = Vue.createApp({...options})
app.mount('#app')
</script>
</body>
