vue3+ts+vite开发10个小技巧

1.使用ref代替data 在Vue 3中，推荐使用ref来代替data。ref可以将一个普通的值转换为响应式数据。

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

2.使用reactive创建响应式对象 Vue 3中，可以使用reactive来创建响应式对象。

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监听响应式数据 watchEffect可以监听响应式数据的变化，并在数据发生变化时执行回调函数。

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计算属性 Vue 3中，可以使用computed来创建计算属性。

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传递数据 在Vue 3中，可以使用provide/inject来传递数据。

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函数进行组件初始化 在Vue 3中，可以使用setup函数来进行组件的初始化操作。

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

7.使用v-model进行双向绑定 在Vue 3中，可以使用v-model进行双向绑定。

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

8.使用setup函数进行路由守卫 在Vue 3中，可以使用setup函数来进行路由守卫的操作。

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将逻辑组织为可复用的函数，并提供了更好的类型推导和代码重用。

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,
 };
}