[JavaScript知识库]Vue3.0——Vue3简介、Vue3带来了什么、拥抱TypeScript、新的特性、Vue3.0环境集成

目录

1.Vue3简介

2.Vue3带来了什么

2.1 性能的提升

2.2 源码的升级

3.拥抱TypeScript

4.新的特性

4.1 Composition API (组合API)

4.2 新的内置组件

4.3 其他改变

5.Vue3.0环境集成

1.使用vue-cli创建

2.使用vite创建

1.Vue3简介

• 2020年9月18日，Vue.js发布3.0版本，代号:One Piece（海贼王）

• 耗时两年多，2600+次提交，30+个RFC，600+次PR，99位贡献者

• github上的tags地址:Release v3.0.0 One Piece · vuejs/core · GitHub

2.Vue3带来了什么

2.1 性能的提升

• 打包大小减少41%

• 初次渲染块55%，更新渲染快133%

• 内存减少54%

• ......

  2.2 源码的升级

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

• 重写虚拟DOM的实现和Tree-Shaking(抖动树)（就是在打包的时候，把没有使用的文件抖掉，不打包）

3.拥抱TypeScript

• vue3.0更好的支持TypeScript

4.新的特性

4.1 Composition API (组合API)

• setup配置

• ref和reactive

• watch和watchEffect

• provide和inject

4.2 新的内置组件

• Fragment

• Teleport

• Suspence

4.3 其他改变

• 新的生命周期钩子

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

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

• .....

5.Vue3.0环境集成

两种方式，两者都是Vue的脚手架

1.使用vue-cli创建

1.查看@vue/cli的版本,确保@vue/cli版本在4.5.0以上
vue --version
2.安装或者升级你的@vue-cli
3.创建
vue create init
4.启动
cd nint
npm run serve

2.使用vite创建

官方文档：快速上手 | Vue.js

vite官网：The domain name vitejs.com is for sale | Dan.com

• 什么是vite？ -------- 新一代的前端工具2

• 优势如下：

  • 开发环境中,无需打包，可快速的冷启动

  • 轻量快速的热加载

1.创建
方法一：
npm init vite hello-vue3 -- --template vue     //生成一个模板页面 
npm i
方法二：
npm init vite taobao  //可以选择集成的插件（路由、仓库、ts等）
选择 vue?js  
然后它提示，下载npm i sass -D

2.启动： npm run dev

3.网址变了，端口号也改了==>? Local: http://127.0.0.1:5173

(因为用localhost不好)

main.js

import { createApp } from 'vue'
//createApp可以创建一个Vnode去挂载页面内部的DOM
//可以创建多页应用
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')