(一)setup,relactive,ref,toRefs以及...的意义
作者：互联网
1:对象和函数的拼接
const satate=reactive({name:"mmss",no:1});
{...toRefs(satate),Updatevalue }这里的...相当于把对象和函数拼接成了一个新对象,相当于return{no:1,Updatevalue}
2:数组间的拼接
var a=[1,2] var b=[3,4] var c=[...a,...b]后最后就是c=[1,2,3,4]
3:对象间的拼接
var a={n1:1,n2:2} var b={n3:3,n4:4} var c={...a,...b}后最后就算c={n1:1,n2:2,n3:3,n4:4}
4:经过...属性计算以后响应式就被取消了,如果还要保留响应式就必须toRefs()
5:vue3推荐把数据和方法都放在setup里面,而不是data,method里面，虽然可以这样放,但是不推荐,呢是vue2的写法
6:reactive和ref都能实现响应数据，reactive只能放对象,ref没有限制,ref还可以绑定dom元素,类似于id,通过ref获取dom元素
下面是完整测试代码:
<template>
<button @click="Updatevalue()">递增</button>
<h1>{{ no }}</h1>
</template>
<script> import { reactive,toRefs } from 'vue'; export default { name: "AppXx", setup(){ const satate=reactive({name:"mmss",no:1}); const Updatevalue= ()=>{ satate.no++; } return { ...toRefs(satate),Updatevalue } } } </script>
<script> import { reactive,toRefs } from 'vue'; export default { name: "AppXx", setup(){ const satate=reactive({name:"mmss",no:1}); const Updatevalue= ()=>{ satate.no++; } return { ...toRefs(satate),Updatevalue } } } </script>
标签：...,satate,setup,toRefs,reactive,var,ref 来源： https://www.cnblogs.com/yingxianqi/p/16181333.html