变量声明定义的时候，不需要返回可以直接使用即可
没有使用setup语法糖时写法
<script>
import {useStore} from 'vuex'
export default {
setup() {
const store=useStore()
const plus=()=>{
store.commit('plus')
}
return {plus}
},
}
</script>使用setup语法糖写法
<script setup>
import { reactive, ref, toRefs } from "vue";
let num = ref(100);
const plus = ()=>{
num.value++;
}
let {name,age} = toRefs(reactive({
name:"张三",
age:20,
}));
</script>toRefs解析reactive数据，可以通过解构赋值进行数据获取
在setup中使用toRefs来解析对象，在非setup中使用...toRefs（）方法来解析，这也是一个区别
setup语法糖组件只需要导入，不需要注册组件
<template>
<div>
{{name}}--{{age}}
<el-button @click="plus">Plus</el-button>
<son/>
</div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import son from "../components/Son.vue"
let num = ref(100);
const plus = ()=>{
num.value++;
}
let {name,age} = toRefs(reactive({
name:"张三",
age:20,
}));
</script>在非setup语法糖中我们需要使用components来注册子组件
setup语法糖中父子组件通信也发生了变化，使用defineProps和defineEmits来进行父子组件通信
父组件
<template>
<div>
{{name}}--{{age}}
<Son :num="age" :name='name' />
</div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import Son from "./Son.vue"
let {name,age} = toRefs(reactive({
name:"张三",
age:20,
}));
</script>子组件
<template>
<div>
<h3>Son子组件--{{num}}--{{name}}</h3>
</div>
</template>
<script setup>
import { ref,defineEmits } from "vue"
defineProps({
num:{
type:Number,
},
name:{
type:String,
}
})
</script>父组件
<template>
<div>
<Son @plus="plus"/>
</div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import Son from "./Son.vue"
let num = ref(100);
const plus = ()=>{
num.value++;
}
</script>子组件
<template>
<div>
<button @click="add">点我</button>
</div>
</template>
<script setup>
import { ref,defineEmits } from "vue"
const num=ref(1)
const emits = defineEmits(['num'])//定义号要子传父
const add=()=>{
emits('plus',num.value)
}
</script>
