script setup是 Vue3 的一个新语法糖,相比于普通的语法,简化了组合式API必须return的写法,拥有更好的运行时性能。
组件自动注册
<script lang="ts" setup>
import assembly from '../components/HelloWorld'
</script>
<template>
<div>
<assembly />
</div>
</template>
使用props和emit
HelloWorld.vue
<script lang="ts" setup>
//import { defineProps, defineEmit } from 'vue' // props emit 自动可用无需导入
const props = defineProps({
msg: String,
})
const emit = defineEmits(['click'])
const sonClick = () => {
emit('click')
}
</script>
template>
<div>
<div>
{{ msg }}
</div>
<button @click="sonClick">按钮</button>
</div>
</template>
home.vue
<script lang="ts" setup>
import { ref } from 'vue'
import assembly from '../components/HelloWorld'
let value = ref('小明')
const onClick = () => {
value.value = '小红'
}
</script>
<template>
<div>
<assembly @click="onClick" :msg="value" />
</div>
</template>
计算属性(computed)和监听器(watch)
<script lang="ts" setup>
import {reactive,computed,watch} from 'vue' // props emit
const count = reactive({
data: 1
})
//计算属性
const change = computed(() => {
return count.data * 2
})
//观察属性
watch(
change,
(newVal, oldVal) => {
console.log(`变化前:${oldVal}`)
console.log(`变化后:${newVal}`)
}, {
immediate: true, // 立即执行
deep: true // 深度监听
}
)
//点击事件
const clickBtn = () => {
count.data = count.data * 3
}
</script>
官网:https://v3.cn.vuejs.org/api/sfc-script-setup.html
这篇文章比较全:https://blog.csdn.net/weixin_43931876/article/details/120058286