Vue3

1.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/releases/tag/v3.0.0
2.Vue3带来了什么
1.性能的提升
●打包大小减少41%
●初次渲染快55%, 更新渲染快133%
●内存减少54%……
2.源码的升级
●使用Proxy代替defineProperty实现响应式
●重写虚拟DOM的实现和Tree-Shaking……
3.拥抱TypeScript
●Vue3可以更好的支持TypeScript
4.新的特性
4.1Composition API（组合API）
●setup配置
●ref与reactive
●watch与watchEffect
●provide与inject
4.2 新的内置组件
●Fragment
●Teleport
●Suspense
4.3其他改变
●新的生命周期钩子
●data 选项应始终被声明为一个函数
●移除keyCode支持作为 v-on 的修饰符
3. 创建vue3工程
3.1 使用vue-cli创建
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue —version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve
3.2 使用vite创建
官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn
3.1 什么是vite？—— 新一代前端构建工具。
●优势如下：
○开发环境中，无需打包操作，可快速的冷启动。
○轻量快速的热重载（HMR）。
○真正的按需编译，不再等待整个应用编译完成。
●传统构建与 vite构建对比图
## 创建工程
npm init vite-app
## 进入工程目录
cd
## 安装依赖
npm install
## 运行
npm run dev
3.3分析工程结构
vue3引入得不再是Vue构造函数了，而是引入一个名为createApp的工厂函数。
工厂函数和构造函数的区别：工厂函数不需要实例化，一般首字母无需大写。

vue2 main.js
JavaScript复制代码

import Vue from ‘vue’
2

import App from ‘./App.vue’
3

import Vue from ‘./router’
4

import store from ‘./store’
5

//引入Element-ui
6

import ElementUI from ‘element-ui’
7

//阻止控制台显示你正处于生产部署期间请确保启用生产模式的警告
9

Vue.config.productionTip = false;
10

Vue.use(ElementUI)
11

Vue.prototype.$http = ()=>{
12

console.log(xxx)
13

}
14

new Vue({
16

router,
17

store,
18

render: (h) => h(App),
19

}).$mount(‘#app’)
20

vue3 main.js
JavaScript复制代码

import {createApp }from ‘vue’
2

import App from ‘./App.vue’
3

import Vue from ‘./router’
4

import store from ‘./store’
5

import ElementUI from ‘element-ui’
6

const app = createApp(App)
8

app.config.globalProperties.$http = ()=>{
9

console.log(xxx)
10

}
11

app.use(ElementUI )
12

app.use(store).use(router).mount(‘#app’)
13

vue基础

Vue3