vue3新特性
vite
使用vite体验更快速
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
从vue2迁移
新特性
-
Composition API
Compostion API为vue应用提供更好的逻辑复用和代码组织。
// 所有的东西都揉在一块儿 setup() { const data = reactive({ msg: "Hello Vite", msgTwo: "message two", counter: 0, doubleCounter: computed(() => data.counter * data.counter), }); const desc = ref(null) let timer; watch(() => data.counter, (val, oldVal) => { desc.value.textContent = `counter change from ${ oldVal} to ${ val}` }) onMounted(() => { timer = setInterval(() => { data.counter++; }, 1000); }); onUnmounted(() => { clearInterval(timer); }); return { data, desc } } // 将与counter有关的逻辑抽离 // setup函数部分 setup(props) { const { counter, doubleCounter } = useCounter(); const msg = ref("message one"); const desc = ref(null) const msgTwo = ref('message two') watch( counter, (val, oldVal) => { desc.value.textContent = `counter change from ${ oldVal