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