# 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.用法一
名字：{{ name }}
2.用法二 reactive() 优化
名字：{{ data.name }}
2.用法三 toRefs() 优化
名字：{{ name }}
# 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 = https://www.it610.com/article/h +":" + m + ":" + s;
setTimeout(getTime, 1000);
};
export { time, getTime }
2.引入
时间：{{time}}
# teleport 独立挂载组件（解决样式等冲突问题不挂载到app下）
1. index.html 页面新加插入点（会挂载到 #headTitie DOM下）
2. 在components目录下新建 headTitle.vue
{{ title }}
3. 在 App.vue 加
# Suspense 异步请求组件
1. 新建Demo.vue
名字：{{ name }}
2. 使用引入 home.vue
加载中...
【Vue3|Vue3 新特性】
