1.使用ref代替data 在Vue 3中，推薦使用ref來代替data。ref可以將一個(gè)普通的值轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)。

import { ref } from 'vue';
export default {
?setup() {
? ?const count = ref(0);
? ?function increment() {
? ? ?count.value++;
? ?}
? ?return {
? ? ?count,
? ? ?increment,
? ?};
?}
}

2.使用reactive創(chuàng)建響應(yīng)式對(duì)象 Vue 3中，可以使用reactive來創(chuàng)建響應(yīng)式對(duì)象。

import { reactive } from 'vue';
export default {
?setup() {
? ?const state = reactive({
? ? ?count: 0,
? ? ?message: 'Hello, Vue 3!',
? ?});
? ?function increment() {
? ? ?state.count++;
? ?}
? ?return {
? ? ?state,
? ? ?increment,
? ?};
?}
}

3.使用watchEffect監(jiān)聽響應(yīng)式數(shù)據(jù) watchEffect可以監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù)。

import { reactive, watchEffect } from 'vue';
export default {
?setup() {
? ?const state = reactive({
? ? ?count: 0,
? ? ?message: 'Hello, Vue 3!',
? ?});
? ?watchEffect(() => {
? ? ?console.log(`count: ${state.count}`);
? ?});
? ?function increment() {
? ? ?state.count++;
? ?}
? ?return {
? ? ?state,
? ? ?increment,
? ?};
?}
}

4.使用computed計(jì)算屬性 Vue 3中，可以使用computed來創(chuàng)建計(jì)算屬性。

import { reactive, computed } from 'vue';
export default {
?setup() {
? ?const state = reactive({
? ? ?count: 0,
? ?});
? ?const doubleCount = computed(() => state.count * 2);
? ?function increment() {
? ? ?state.count++;
? ?}
? ?return {
? ? ?state,
? ? ?doubleCount,
? ? ?increment,
? ?};
?}
}

5.使用provide/inject傳遞數(shù)據(jù) 在Vue 3中，可以使用provide/inject來傳遞數(shù)據(jù)。

import { provide, inject } from 'vue';
const ThemeKey = Symbol();
export function provideTheme(theme: string) {
?provide(ThemeKey, theme);
}
export function useTheme() {
?const theme = inject(ThemeKey);
?if (!theme) {
? ?throw new Error('No theme provided');
?}
?return theme;
}

6.使用setup函數(shù)進(jìn)行組件初始化 在Vue 3中，可以使用setup函數(shù)來進(jìn)行組件的初始化操作。

import { ref, onMounted } from 'vue';
export default {
?setup() {
? ?const count = ref(0);
? ?onMounted(() => {
? ? ?console.log('Component mounted');
? ?});
? ?return {
? ? ?count,
? ?};
?}
}

7.使用v-model進(jìn)行雙向綁定 在Vue 3中，可以使用v-model進(jìn)行雙向綁定。

<template>
?<input v-model="message">
?{{ message }}
</template>
<script>
?import { ref } from 'vue';
?export default {
? ?setup() {
? ? ?const message = ref('');
? ? ?return {
? ? ? ?message,
? ? ?};
? ?}
?}
</script>

8.使用setup函數(shù)進(jìn)行路由守衛(wèi) 在Vue 3中，可以使用setup函數(shù)來進(jìn)行路由守衛(wèi)的操作。

import { onBeforeRouteLeave } from 'vue-router';
export default {
?setup() {
? ?onBeforeRouteLeave((to, from, next) => {
? ? ?console.log(`Leaving ${from.path} to ${to.path}`);
? ? ?next();
? ?});
?}
}

9.使用async/await處理異步操作 在Vue 3中，可以使用async/await來處理異步操作。

import { ref } from 'vue';
export default {
?setup() {
? ?const isLoading = ref(false);
? ?const data = ref([]);
? ?async function fetchData() {
? ? ?isLoading.value = true;
? ? ?const response = await fetch('https://api.example.com/data');
? ? ?data.value = await response.json();
? ? ?isLoading.value = false;
? ?}
? ?fetchData();
? ?return {
? ? ?isLoading,
? ? ?data,
? ?};
?}
}

10.使用組合式API Vue 3中，推薦使用組合式API來編寫代碼。組合式API將邏輯組織為可復(fù)用的函數(shù)，并提供了更好的類型推導(dǎo)和代碼重用。

import { ref, computed } from 'vue';
export function useCounter() {
?const count = ref(0);
?function increment() {
? ?count.value++;
?}
?const doubleCount = computed(() => count.value * 2);
?return {
? ?count,
? ?increment,
? ?doubleCount,
?};
}