(一)setup,relactive,ref,toRefs以及...的意义

2022/4/23 6:13:25

本文主要是介绍(一)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>

这篇关于(一)setup,relactive,ref,toRefs以及...的意义的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程