vue3簡介——更新Vue的版本 vue2.9.6更新到vue3.0——建立Vue3.0工程
- 1.Vue3簡介
- 2.Vue3帶來了什麼
- 1.性能的提升
- 2.源碼的更新
- 3.擁抱TypeScript
- 4.新的特性
- 3.更新Vue的版本 vue2.9.6更新到vue3.0
- 建立Vue3.0工程
- 1.使用 vue-cli 建立
- 2.使用 vite 建立
- 關閉eslint文法檢查
- vue3_devtool開發者工具的下載下傳安裝
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.新的特性
- Composition API（組合API）
- setup配置
- ref與reactive
- watch與watchEffect
- provide與inject
- …
- 新的内置元件
- Fragment
- Teleport
- Suspense
- 其他改變
- 新的生命周期鈎子
- data 選項應始終被聲明為一個函數
- 移除keyCode支援作為 v-on 的修飾符
- …
3.更新Vue的版本 vue2.9.6更新到vue3.0
- 解除安裝原來的版本
- 安裝新版本
- 通過GUI界面建立項目
首先需要解除安裝你之前的vue2.9.6
打開cmd視窗輸入如下指令
npm 然後運作指令vue-V會發現不是可執行的指令，就說明已經解除安裝成功了
安裝新版本
首先你要確定你的Node.js的版本高于最低要求的版本
Vue CLI 3需要 nodeJs ≥ 8.9 (官方推薦 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台電腦中管理多個 Node 版本）。
運作指令
npm install 建立Vue3.0工程
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 2.使用 vite 建立
官方文檔：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官網：https://vitejs.cn
- 什麼是vite？—— 新一代前端建構工具。
- 優勢如下：
- 開發環境中，無需打包操作，可快速的冷啟動。
- 輕量快速的熱重載（HMR）。
- 真正的按需編譯，不再等待整個應用編譯完成。
- 傳統建構 與 vite建構對比圖incentive
-
vue3簡介——更新Vue的版本 vue2.9.6更新到vue3.0——建立Vue3.0工程-——vue3_devtool開發者工具的下載下傳安裝
## 建立工程
npm init vite-app <project-name>
## 進入工程目錄
cd <project-name>
## 安裝依賴
npm install
## 運作
npm 關閉eslint文法檢查
根目錄建立vue.config.js
module.exports={
lintOnSave:false //關閉文法檢查
} vue3的main.js解讀
// 引入的不再是Vue的構造函數，引入的是一個名為CreateApp的工廠函數
import { createApp } from 'vue'
import App from './App.vue'
//建立應用執行個體對象app，類似vue2中的vm，但比vm更輕盈
const app = createApp(App);
app.mount('#app')
//定時器解除安裝這個app
setInterval(() => {
app.unmount('#app')
}, 1000)
// 挂載
// const vm = new Vue({
// render :h=>(App)
// })
// vm.$mount('#app') app.js解讀
<template>
<!-- vue3中的模闆可以沒有根标簽 -->
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>