Vue3 新特性

# Vue3的改进及特点

1.性能的提升：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%。

2.新推出的Composition API 使组件更易维护，减少无用数据绑定页面更流畅。

4.更好TypeScript支持，可以在创建命令里直接配置，页面集成畅通无阻。

5.Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。

6.Vue3兼容大部分Vue2的特性，用Vue2代码开发Vue3都可以。

# 安装

vue --version # 查看版本

注意：如果以前安装过，需要检查一下版本，因为只有最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项。

npm install -g @vue/cli

使用 vue-cli 命令行创建项目

vue create vue3-1 // 根据提示自己选择配置

启动命令

yarn serve 或 npm run serve

打包命令

yarn build 或 npm run build

# 新语法 setup(),ref(),reactive()

// 注：setup是为了优化性能让程序按需引入全局统一

1.用法一

2.用法二 reactive() 优化

2.用法三 toRefs() 优化

# Vue3 生命周期函数用法, 需要引入 (注：vue2 生命周期函数不影响)

# Vue3 watch用法

# Vue3 模块化重用功能 (优化 mixins)

1.新建useTime.ts文件

import { ref } from "vue";

const time = ref("00:00:00");

const getTime = () => {

    const now = new Date();

    const h= now.getHours() < 10 ? "0" + now.getHours() : now.getHours();

    const m = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();

    const s= now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();

    time.value = h + ":" + m + ":" + s;

    setTimeout(getTime, 1000);

};

export { time, getTime }

2.引入

# teleport 独立挂载组件（解决样式等冲突问题不挂载到app下）

1. index.html 页面新加插入点（会挂载到 #headTitie DOM下）

2. 在components目录下新建 headTitle.vue

3. 在 App.vue 加

# Suspense 异步请求组件

1. 新建Demo.vue

2. 使用引入 home.vue