vue3标准组件<script> 需要写setup函数并繁琐retrun如下
<script>
import { ref, reactive } from 'vue';
export default{
setup(){
let a = ref('a')
let b = ref('b')
let num = ref(0)
let person = reactive({
name: 'zs',
age: 18
}),
let add = ()=>{
num.value++;
person.age++;
}
return {
a,
b,
num,
person,
add
}
}
}
</script>
<template>
<div>
{{ a+b+num }}
name: {{ person.name }} age: {{ person.age }}
<div @click="add">click add</div>
</div>
</template>
数据少还好,如果数据很多呢,就要在return中写很多,有没有什么方法可以减少return中的代码呢?
如下:用一个data,methods来统一管理属性与方法,只需要在return中解构data与methods即可
<script>
import { ref, reactive } from 'vue';
export default{
setup(){
let data = {
a: ref('a'),
b: ref('b'),
num: ref(0),
person: reactive({
name: 'zs',
age: 18
}),
}
let methods = {
add(){
data.num.value++;
data.person.age++;
}
}
return {
...data,
...methods
}
}
}
</script>
<template>
<div>
{{ a+b+num }}
name: {{ person.name }} age: {{ person.age }}
<div @click="add">click add</div>
</div>
</template>