Vue3 简介以及环境搭建

一、Vue3 简介

　　  2020年9月18日，Vue.js 发布3.0 版本，代号： One Piece

　　  耗时2年多： 2600+次提交、30+个RFC、600+次PR、99位贡献者

　　  github上的 tags 地址： https://github.com/vuejs/vue-next/release/tag/v3.0.0

二、Vue3 带来了什么

　　1. 性能的提升

　　　   - 打包大小减少41%

　　　　　- 初次渲染快 55%，更新渲染快 133%

　　　　　- 内存减少 54%

　　  2. 源码的升级

　　　　    - 使用 Proxy 代替 defineProperty 实现响应式

　　　　　 - 重写虚拟 DOM 的实现和 Tree-Shaking

　　  3. 拥抱 TypeScript

　　　　     - Vue3 可以更好的支持 TypeScript

　　  4. 新的特性

　　　　    1. Composition API（组合API）

　　　　　　 -  setup 配置

　　　　　　 - ref 与 reactive

　　　　　　 - watch 与 watch Effect

　　　　　　  - provide 与 inject

　　　　　　  - ......

　　　　　2. 新的内置组件

　　　　　　 -  Fragment

　　　　　　  - Teleport

　　　　　　  - Suspense

　　　　    3. 其他改变

　　　　　　   - 新的生命周期钩子

　　　　　　   - data 选项应始终被声明为一个函数

　　　　　　   - 移除 keyCode 支持作为 v-on 的修饰符

　　　　　　   - ......

二、创建vue3.0 项目工程

1. 使用 vue-cli 创建

 npm run serve 就可以看到啦~

2. 使用 vite 创建

 　　- 官方文档： http://v3.cn.vuejs.org/guide/installation.html#vite

　　 - vite 官网： https://vitejs.cn

　　　　什么是 vite？ —— 新一代的前端构建工具。

　　　　优势如下：

　　　　　　1. 开发环境中，无需打包操作，可以快速的冷启动。

　　　　　　2. 轻量快速的热重载（HMR）。

　　　　　　3. 真正的按需编译，不再等待整个应用编译完成。

　　- 传统构建 与 vite 构建对比图

 

 

##创建工程：
npm init vite-app <project-name>
##进入工程目录
cd <project-name>
##安装依赖
npm install
##运行
npm run dev

 

• 分析工程结构

## main.js 文件

// 引入的不再是Vue 构造函数了，引入的是一个名为 createApp 的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象——app（类似于之前Vue2中的vm，但app比vm更“轻”）
const app = createApp(App)
// 挂载
app.mount('#app')

// setTimeout(() => {
//     app.unmount('#app') 卸载app，页面会清空
// }, 1000)

// const vm = new Vue({
//     render: h => h(App)
// })
// vm.$mount('#app')

 

上述代码中的 变量 app 打印内容为：