前言
2020年9月19日凌晨，尤雨溪大大正式發布了3.0版本，代號：One Piece， 不要太刺激哦
Vue 從一開始就有一個簡單的使命：成為一個任何人都能快速學會的平易近人的框架，隨著我們用戶群的增長，框架的范圍也在不斷擴大，以適應不斷增長的需求，隨著時間的推移，它演變成了我們所說的“漸進式框架”：一個可以逐步學習和采用的框架，同時隨著用戶應對越來越多的需求場景而提供持續的支持，
下面是3.0版本的一些特點
- 在 Vue 3 中，基于物件的 2.x API 基本沒有變化，3.0 還引入了 [Composition API]，旨在解決 Vue 在大規模應用中的使用痛點，實作了類似于 React 鉤子的邏輯組成和重用，比 2.x 基于物件的 API 更靈活的代碼組織模式和更可靠的型別推理，
- Vue 3 與 Vue 2 相比，在捆綁大小 (tree-shaking 時減少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和記憶體使用 (少了 54%) 方面都有[顯著的性能提升]
- Vue 3 的代碼庫是用 TypeScript 撰寫的，具有自動生成，測驗和捆綁的型別定義，因此它們始終是最新的，Composition API 可以很好地處理型別推斷，Vetur 是我們的官方 VSCode 擴展，現在利用 Vue 3 改進的內部鍵入功能支持模板運算式和 props 型別檢查，哦，如果您愿意，Vue 3 的打字完全支持 TSX，
- 為單檔案組件 (SFC，即 `.vue` 檔案) 提出了兩個新特性：`<script setup>`和 `<style vars>`
接下來，搭建一個Vue 3.0專案練練手吧：
- 基于 vue-cli 快速搭建 Vue 3.0 專案
- Vue 3.0 基本特性體驗
- 集成 vue-router 和 vuex 4.0
Vue 3.0 專案初始化
第一步，安裝vue-cli
npm install -g @vue/cli注意，以下命令是錯誤的
npm install -g vue
npm install -g vue-cli
安裝成功后，我們可以使用vue命令，測驗方法
$ vue -V
@vue/cli 4.3.1第二步，初始化vue專案：
vue create vue-next-test輸入命令后，會出現命令列互動視窗，這里我們選擇Manually select features:
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
? Manually select features 隨后，我們勾選： Router,vuex,css pre-processors 和 Linter / Formatter
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Babel
? TypeScript
? Progressive Web App (PWA) Support
? Router
? Vuex
? CSS Pre-processors
?? Linter / Formatter
? Unit Testing
? E2E Testing
注意：Vue 3.0 專案目前需要從 Vue 2.0 專案升級而來，所以為了直接升級到 Vue 3.0 全家桶，
我們需要在 Vue 專案創建程序中勾選 Router 和 Vuex，所以避免手動寫初始化代碼升級vue 3.0專案
目前創建vue 3.0專案需要通過插件升級的方式來實作
vue-cli還沒有直接支持，我們進入目錄，并輸入以下指令
cd vue-next-test
vue add vue-next執行上述指令后，會自動安裝vue-cli-plugin-vue-next插件，該插件會完成以下操作：
- 安裝 Vue 3.0 依賴
- 更新 Vue 3.0 webpack loader 配置，使其能夠支持 .vue 檔案構建（這點非常重要）
- 創建 Vue 3.0 的模板代碼
- 自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本，如果未安裝則不會升級
- 自動生成 Vue Router 和 Vuex 模板代碼
完成上述操作后，該專案正式升級到vue 3.0，注意該插件還不能支持typescript,用typescript的同學還得再等等（還不太支持TS）
Vue 3.0基本特性體驗
下面我們從專案開發的角度體驗vue 3.0的開發流程
【創建路由】
專案開發中，我們通常需要創建新頁面，然后添加路由配置，我們在 /src/views 目錄下創建 Test.vue:
<template>
<div class="test">
<h1>vue3.0 初體驗</h1>
<p>少年你的頭發可還好，？？？？ 哈哈哈哈哈</p>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.test {
color: red;
}
</style>之后在/src/router/index.js中創建路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router初始化Vue Router 的程序與2.0的變化不大，只是之前采用建構式的方式，這里改為使用createRouter來創建Vue Router實體
配置的方法基本一致，配置完成后我們還需要在App.vue中鏈接到Test.vue的路由
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</div>
<router-view/>
</div>
</template>啟動專案
npm run serve
狀態和事件系結
Vue中定義狀態的方法為類似React Hooks的方法，下面我們在Test.vue中定義一個狀態 count:
<template>
<div class="test">
<h1>test count: {{count}}</h1>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
return {
count
}
}
}
</script>Vue 3.0中初始化狀態通過setup 方法
定義狀態需要呼叫 ref方法，接下來我們定義一個事件，用來更新 count狀態：
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
return {
count,
add
}
}
}
</script>這里的add方法不再需要定義在methods中，
但注意更新 count值的時候不能直接使用count++ ，而應使用count.value++,
更新代碼后，點擊按鈕，count的值就會更新了
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
return {
count,
doubleCount,
add
}
}
}
</script>計算屬性couputed是一個方法，里面需要包含一個回呼函式，當我們訪問計算屬性回傳結果時，會自動獲取回呼函式的值
const doubleCount = computed(() => count.value * 2)監聽器watch同樣是一個方法，它包含兩個引數，兩個引數都是function:
watch(() => count.value,
val => {
console.log(`count is ${val}`)
})第一個引數是監聽的值，count.value表示當count.value發生變化就會觸發監聽器的回呼函式，而第二個引數，第二個引數可以執行監聽時候的回呼
如果是2個以上的監聽屬性，就是這樣
watch(
[refA, () => refB.value],
([a, b], [prevA, prevB]) => {
console.log(`a is: ${a}`)
console.log(`b is: ${b}`)
}
)獲取路由
Vue 3.0通過 getCurrentInstance方法獲取當前組件的實體，然后通過背景關系屬性ctx獲取當前背景關系，
ctx.$router是Vue Router實體，里面包含了currentRoute 可以獲取到當前路由資訊
<script>
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
}
}
</script>Vuex 集成
Vuex 的集成方法如下
定義Vuex狀態
第一步，修改src/store/index.js檔案：
import Vuex from 'vuex'
export default Vuex.createStore({
state: {
test: {
a: 1
}
},
mutations: {
setTestA(state, value) {
state.test.a = value
}
},
actions: {
},
modules: {
}
})Vuex的語法和API基本沒有改變，我們在state中創建了一個test.a狀態，在mutations中添加了修改state.test.a狀態的方法： setTestA
參考Vuex狀態
第二步，在Test.vue中，通過計算屬性使用Vuex狀態：
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
return {
count,
doubleCount,
add,
a
}
}
}
</script>這里我們通過計算屬性來參考Vuex中的狀態：
const a = computed(() => ctx.$store.state.test.a)ctx 是上節中我們提到的當前組件實體
更新Vuex狀態
更新Vuex狀態任然使用commit方法，這點和2.0版本一致
<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
<button @click="update">update a</button>
</div>
</template>
<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
const update = () => {
ctx.$store.commit('setTestA', count)
}
return {
count,
doubleCount,
add,
a,
update
}
}
}
</script>這里我們點擊update a按鈕后，會觸發update方法，此時會通過ctx.$store.commit呼叫setTestA方法，將count的值覆寫state.test.a的值
總的效果如下
最后，總結如下
vue 3.0都寫在setup里，以前的所有資料狀態都寫在data里，
vue 2.0所有的方法都寫在methods里，而現在可以根據功能模塊把狀態和方法劃分在一起，更利于模塊化，
不過這樣對代碼習慣和質量要求更高了，初學者用3.0可能會寫的更混亂
貌似vue逐漸react化，存在即合理
好怕vuex會被provide和inject特性給替換掉
使用
了解有關 Vue 3.0 的更多資訊，訪問新檔案網站，如果是 Vue 2.x 用戶，訪問遷移指南，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/113330.html
標籤：其他