初始 Vue3

Vue3 介绍

1. 2020 年 9 月 18 日， Vue.js 发布 Vue3.0 版本。
2. 耗时两年，2600+次提交。

性能优化

1. 打包大小减少 41%
2. 初次渲染快 55%，更新渲染快 133%
3. 内存减少 54%

源码的提升

1. 使用 Proxy 取代 defineProperty 实现响应式
2. 重写虚拟 DOM 的实现和 Tree-Shaking

新的特性

1. Composition API（组合 API）
   • setup 配置
   • ref 与 reactive
   • watch 与 watchEffect
   • provide 与 inject
2. 新的内置组件
   • Fragment
   • Teleport
   • Suspense
3. 其他
   • 新的生命周期钩子
   • data 选项应始终被声明为一个函数
   • 移除 keyCode 支持作为 v-on 的修饰符

创建 Vue3 项目

使用 vue-cli 创建

npm

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli
npm instal1 -g @vue/cli

## 创建
vue create vue_test

使用 vite 创建

1. vite 是新一代前端构建工具，同 webpack。

2. 官网：https://vitejs.cn

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

4. 轻量快速的热重载(HMR)。

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

6. 创建工程

   npm

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

目录结构

main.js

1. 工厂函数（createApp）和构造函数（Vue 2 中的 Vue）的区别：
   • 工厂函数首字母不需要大写；构造函数需要首字母大写。
   • 使用工厂函数直接调用即可；使用构造函数需要 new 实例。
2. 挂载与卸载
   • 挂载：createApp(App).mount('#app')
   • 卸载：createApp(App).unmount('#app');

App.vue

Vue3 组件中的模板结果可以没有根标签。

main.js

// 引入 createApp 工厂函数
import { createApp } from 'vue';
import App from './App.vue';

// createApp 返回值为应用实例对象，类似于 Vue2 中的 vm，不同的是 createApp 返回值比 vm 轻。
createApp(App).mount('#app');

App.vue

<template>
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App" />
</template>

关闭语法检查

同 Vue2，在根目录中创建 vue.config.js 文件，代码如下：

vue.config.js

module.exports = {
    lintOnSave: false
}

浏览器开发者工具

之前版本的插件只能兼容 Vue2 项目，写 Vue3 用下面这个。