vue3 setup语法糖 例子

<template>
    <div style="border: 1px solid">
        <h1>Setup</h1>
        <input v-model="firstName" placeholder="enter firstName">
        <input v-model="lastName" placeholder="enter lastName">
        <div>{{ username }} is {{ age }} years old;</div>
        <div>obj.a:{{ obj.a }}</div>
        <button @click="changeAge">change age</button>
        <button @click="changeType">change type to 'amuse'</button>

        <h2>props type: {{ type }}</h2>
        <!-- 组件只要引用，不需要注册就可以使用 -->
        <Unit></Unit>
    </div>
</template>

<script setup>
// Vue
import { ref, reactive, computed, watch, defineProps, defineEmits } from "vue";
// Components
import Unit from './unit.vue'

// props
const props = defineProps({
    type: String,
    nameList: {
        type: Array,
        default: () => []
    }
})
const emits = defineEmits(['change-type'])

// ref
const age = ref(33)
const firstName = ref("Mei")
const lastName = ref("Chen")

// reactive
const obj = reactive({
    a: 1,
    b: 2,
})

// computed
const username = computed(() => `${firstName.value} ${lastName.value}`)

// watch
watch(() => username, (name) => {
    console.log('new:', name);
})
// 监听props
watch(
    () => props.type,
    (newType) => {
        console.log('new type:', newType);
    },
    {
        deep: true
    })

// methods
const changeAge = () => {
    age.value++
}
// emit
const changeType = () => {
    emits('change-type', 0)
}
</script>```