Vue 3 是一個全新的版本，它采用的是 Composition API，這使得 Vue 變得更加靈活，并且能夠更好地管理代碼。下面是一些常用的 Vue 3 語法

// 定義組件
import { defineComponent } from 'vue'
export default defineComponent({
name: 'MyComponent',
setup() {
// ...
},
// ...
})
// ref
import { ref } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
return {
count,
increment() {
count.value++
}
}
}
})
// reactive
import { reactive } from 'vue'
export default defineComponent({
setup() {
const state = reactive({
username: '',
password: ''
})
return {
state
}
}
})
// watch
import { watch } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
watch(count, (newValue, oldValue) =>{
console.log('count changed from', oldValue, 'to', newValue)
})
return {
count
}
}
})
// computed
import { computed } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
const doubled = computed(() =>count.value * 2)
return {
count,
doubled
}
}
})