vue3 从新引入依赖包

Vue3引入依赖包的新设计使得开发者能够按需引入，避免了不必要的全局污染和性能打包问题。在使用计算属性时[^1]，你不需要直接导入整个`vue`库，而是这样操作：

import { createApp, reactive, onMounted, computed } from 'vue';

export default {
  setup() {
    // 创建一个可复用的状态管理对象
    const state = reactive({
      username: '',
      password: '',
      // 使用 computed 函数创建只读的 lowerCaseUsername 计算属性
      lowerCaseUsername: computed(() => state.username.toLowerCase()),
    });

    // ...其他组件逻辑

    // 当组件挂载时执行某些操作，如初始化数据
    onMounted(() => {
      // 在这里处理组件的初始设置
    });

    // 返回组件实例或暴露接口供父组件访问
    return { state };
  },
};

通过这种方式，你可以更灵活地管理组件内部的依赖。此外，Vue3的创建方式也有所变化，不再是`new Vue`，而是使用`createApp`函数：

// 创建一个应用实例
const app = createApp(AppComponent);

// 配置选项，如Typescript支持
app.config TypeScript = {
  // ...配置项
};

// 启动应用
app.mount('#app');