本文主要是介绍(一)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以及...的意义的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!