在使用VCA方式编写Vue代码是，大部分逻辑都是被setup(){}包裹起来，且最后使用的时候需要return{}出去。比较繁琐，实际上Vue提供了setup语法糖，可以简化这些操作。
1 不再需要export default 与 return
不使用语法糖写法
<template>
<div @click="handelClick">app-{{ msg }}</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const msg = ref('hello')
const handelClick = () => { console.log(msg.value) }
return {
msg, handelClick
}
}
}
</script>使用setup语法糖
<template>
<div @click="handelClick">app-{{msg}}</div>
</template>
<script setup>
import { ref } from 'vue'
const msg=ref('hello')
const handelClick=()=>{console.log(msg.value)}
</script>
2 组件引入不需要component
不使用语法糖写法
<template>
<div>
app-{{ msg }}
<ConA/>
</div>
</template>
<script>
import ConA from './ConA.vue'
import { ref } from 'vue'
export default{
components:{
ConA
},
setup() {
const msg = ref('hello')
}
}
</script>使用setup语法糖写法
直接import相应的模块即可，不需要使用componts声明引入。
<template>
<div>
app-{{ msg }}
<ConA />
</div>
</template>
<script setup>
import ConA from './ConA.vue'
import { ref } from 'vue'
const msg = ref('hello')
</script>props写法差异
针对子组件传递props
<template>
<div> {{ title }} </div>
</template>
<script>
export default{
props:{
title:{
type:String,
}
},
}</script>使用语法糖写法
引入了defineProps方法
<template>
<div> {{ title }} </div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
title: { type: String }
})
</script>emit写法
在此示例中，子节组件绑定两个事件home mine，点击后回传字符串信息给根节点
引入了defineEmits。这个方法以数组形式接受从父组件传递过的事件，然后通过emit方法针对不同时间进行处理。
App.vue
<template>
<div>
app-{{ msg }}
<ConA title="ConA" @home="handelClick" @mine="handelClick"/>
</div>
</template>
<script setup>
import ConA from './ConA.vue'
import { ref } from 'vue'
const msg = ref('hello')
const handelClick=(value)=>{console.log(value)}
</script>ConA.vue
<template>
<div>
<button @click="handleHome">首页</button>
{{ title }}
<button @click="handleMine">我的</button>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
title: { type: String }
})
const emit = defineEmits(['home','mine'])
const handleHome = ()=> {
emit('home','Home')
}
const handleMine = ()=> {
emit('mine','mine')
}
</script>动态组件
通过 Vue 的 <component> 元素和特殊的 is attribute 实现的：
<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>在上面的例子中，被传给 :is 的值可以是以下几种：
- 被注册的组件名
- 导入的组件对象
<component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。可通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。
<template>
<button v-for="(value, key) in tabs" :key="key" @click="handleClick(key)">{{ key }} </button>
<component :is="tabs[currentTab]"></component>
</template>
<script setup>
import ConA from './ConA.vue'
import ConB from './ConB.vue'
import ConC from './ConC.vue'
import ConD from './ConD.vue'
import { ref } from 'vue'
const tabs = {
ConA,
ConB,
ConC,
ConD
}
const currentTab = ref('ConA')
const handleClick = (key) => {
console.log(key)
currentTab.value = key
}
</script>