Vue 3.0 全家桶搶先體驗(yàn)

更新時(shí)間：2020年04月28日 09:50:20 作者：Sam

這篇文章主要介紹了Vue 3.0 全家桶搶先體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

序

Vue 3.0 全家桶發(fā)布內(nèi)容包括：

vue: Beta
vue-router: Alpha
vuex: Alpha
vue-class-component: Alpha
vue-cli: Experimental support via vue-cli-plugin-vue-next
eslint-plugin-vue: Alpha
vue-test-utils: Alpha
vue-devtools: WIP
jsx: WIP

可以看到 Vue 3.0 beta 版本是一個(gè)項(xiàng)目系列，包含了我們?cè)陂_發(fā)過程中需要的套件、webpack 插件等等，本文將帶大家快速搭建基于 Vue 3.0 的項(xiàng)目框架，這和之前很多 Vue 3.0 的 Demo 不同，是具備商業(yè)化項(xiàng)目能力的框架，本文將包括以下內(nèi)容：

基于 vue-cli 快速搭建 Vue 3.0 項(xiàng)目
Vue 3.0 基本特性體驗(yàn)
集成 vue-router 和 vuex 4.0

說個(gè)題外話，今天中午我搭建 Vue 3.0 項(xiàng)目時(shí)，發(fā)現(xiàn)了 vue-router-next 一個(gè) block 級(jí)別的 BUG，想在 vue-router-next 項(xiàng)目 issue 中反饋時(shí)，發(fā)現(xiàn)已經(jīng)有人提交了相似問題，隨后晚上測(cè)試時(shí)，bug 已經(jīng)被 fixed，為 Vue 團(tuán)隊(duì)的高效點(diǎn)贊，issue 地址，所以當(dāng)大家發(fā)現(xiàn)使用中問題時(shí)，可以及時(shí)到項(xiàng)目 issue 下進(jìn)行反饋，這是一支可以信賴的團(tuán)隊(duì)！

Vue 3.0 項(xiàng)目初始化

Vue 3.0 項(xiàng)目初始化過程和 Vue 2.0 類似，具體步驟如下：

Vue 項(xiàng)目初始化

第一步，安裝 vue-cli：

npm install -g @vue/cli

注意以下命令是錯(cuò)誤的！

npm install -g vue
npm install -g vue-cli

安裝成功后，我們即可使用 vue 命令，測(cè)試方法：

$ vue -V
@vue/cli 4.3.1

第二步，初始化 vue 項(xiàng)目：

vue create vue-next-test

輸入命令后，會(huì)出現(xiàn)命令行交互窗口，這里我們選擇 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，這些都是開發(fā)商業(yè)級(jí)項(xiàng)目必須的：

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 項(xiàng)目目前需要從 Vue 2.0 項(xiàng)目升級(jí)而來(lái)，所以為了直接升級(jí)到 Vue 3.0 全家桶，我們需要在 Vue 項(xiàng)目創(chuàng)建過程中勾選 Router 和 Vuex，所以避免手動(dòng)寫初始化代碼

回車后會(huì)自動(dòng)安裝依賴，為了加速安裝速度，我們可以使用淘寶源來(lái)加快初始化速度：

vue create -r https://registry.npm.taobao.org vue-next-test

項(xiàng)目創(chuàng)建完畢后，目錄結(jié)構(gòu)如下：

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│  ├── favicon.ico
│  └── index.html
└── src
  ├── App.vue
  ├── assets
  │  └── logo.png
  ├── components
  │  └── HelloWorld.vue
  ├── main.js
  ├── router
  │  └── index.js
  ├── store
  │  └── index.js
  └── views
    ├── About.vue
    └── Home.vue

升級(jí) Vue 3.0 項(xiàng)目

目前創(chuàng)建 Vue 3.0 項(xiàng)目需要通過插件升級(jí)的方式來(lái)實(shí)現(xiàn)，vue-cli 還沒有直接支持，我們進(jìn)入項(xiàng)目目錄，并輸入以下指令：

cd vue-next-test
vue add vue-next

執(zhí)行上述指令后，會(huì)自動(dòng)安裝 vue-cli-plugin-vue-next 插件（查看項(xiàng)目代碼），該插件會(huì)完成以下操作：

安裝 Vue 3.0 依賴
更新 Vue 3.0 webpack loader 配置，使其能夠支持 .vue 文件構(gòu)建（這點(diǎn)非常重要）
創(chuàng)建 Vue 3.0 的模板代碼
自動(dòng)將代碼中的 Vue Router 和 Vuex 升級(jí)到 4.0 版本，如果未安裝則不會(huì)升級(jí)
自動(dòng)生成 Vue Router 和 Vuex 模板代碼

完成上述操作后，項(xiàng)目正式升級(jí)到 Vue 3.0，注意該插件還能支持 typescript，用 typescript 的同學(xué)還得再等等。

Vue 3.0 基本特性體驗(yàn)

下面我們從項(xiàng)目開發(fā)的角度逐步體驗(yàn) Vue 3.0 的開發(fā)流程

創(chuàng)建路由

項(xiàng)目開發(fā)中，我們通常需要?jiǎng)?chuàng)建新頁(yè)面，然后添加路由配置，我們?cè)?/src/views 目錄下創(chuàng)建 Test.vue：

<template>
 <div class="test">
  <h1>test page</h1>
 </div>
</template>

<script>
 export default {
 }
</script>

<style lang="less" scoped>
.test {
 color: red;
}
</style>

之后在 /src/router/index.js 中創(chuàng)建路由配置：

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 的過程與 3.0 版本變化不大，只是之前采用構(gòu)造函數(shù)的方式，這里改為使用 createRouter 來(lái)創(chuàng)建 Vue Router 實(shí)例，配置的方法基本一致，配置完成后我們還需要在 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>

啟動(dòng)項(xiàng)目：

npm run serve

在瀏覽器中訪問項(xiàng)目地址，此時(shí)已經(jīng)可以跳轉(zhuǎn)到 Test 頁(yè)面：

狀態(tài)和事件綁定

Vue 3.0 中定義狀態(tài)的方法改為類似 React Hooks 的方法，下面我們?cè)?Test.vue 中定義一個(gè)狀態(tài) 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 中初始化狀態(tài)通過 setup 方法，定義狀態(tài)需要調(diào)用 ref 方法。接下來(lái)我們定義一個(gè)事件，用來(lái)更新 count 狀態(tài)：

<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 值的時(shí)候不能直接使用 count++，而應(yīng)使用 count.value++，更新代碼后，點(diǎn)擊按鈕，count 的值就會(huì)更新了：

計(jì)算屬性和監(jiān)聽器

Vue 3.0 中計(jì)算屬性和監(jiān)聽器的實(shí)現(xiàn)依賴 computed 和 watch 方法：

<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>

計(jì)算屬性 computed 是一個(gè)方法，里面需要包含一個(gè)回調(diào)函數(shù)，當(dāng)我們?cè)L問計(jì)算屬性返回結(jié)果時(shí)，會(huì)自動(dòng)獲取回調(diào)函數(shù)的值：

const doubleCount = computed(() => count.value * 2)

監(jiān)聽器 watch 同樣是一個(gè)方法，它包含 2 個(gè)參數(shù)，2 個(gè)參數(shù)都是 function：

watch(() => count.value, 
 val => {
  console.log(`count is ${val}`)
 })

第一個(gè)參數(shù)是監(jiān)聽的值，count.value 表示當(dāng) count.value 發(fā)生變化就會(huì)觸發(fā)監(jiān)聽器的回調(diào)函數(shù)，即第二個(gè)參數(shù)，第二個(gè)參數(shù)可以執(zhí)行監(jiān)聽時(shí)候的回調(diào)

獲取路由

Vue 3.0 中通過 getCurrentInstance 方法獲取當(dāng)前組件的實(shí)例，然后通過 ctx 屬性獲得當(dāng)前上下文，ctx.$router 是 Vue Router 實(shí)例，里面包含了 currentRoute 可以獲取到當(dāng)前的路由信息

<script>
 import { getCurrentInstance } from 'vue'

 export default {
  setup () {
   const { ctx } = getCurrentInstance()
   console.log(ctx.$router.currentRoute.value)
  }
 }
</script>

Vuex 集成

Vuex 的集成方法如下：

定義 Vuex 狀態(tài)

第一步，修改 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 的語(yǔ)法和 API 基本沒有改變,我們?cè)?state 中創(chuàng)建了一個(gè) test.a 狀態(tài)，在 mutations 中添加了修改 state.test.a 狀態(tài)的方法： setTestA

引用 Vuex 狀態(tài)

第二步，在 Test.vue 中，通過計(jì)算屬性使用 Vuex 狀態(tài)：

<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>

這里我們通過計(jì)算屬性來(lái)引用 Vuex 中的狀態(tài)：

const a = computed(() => ctx.$store.state.test.a)

ctx 是上節(jié)中我們提到的當(dāng)前組件實(shí)例

更新 Vuex 狀態(tài)

更新 Vuex 狀態(tài)仍然使用 commit 方法，這點(diǎn)和 Vuex 3.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>

這里我們點(diǎn)擊 update a 按鈕后，會(huì)觸發(fā) update 方法，此時(shí)會(huì)通過 ctx.$store.commit 調(diào)用 setTestA 方法，將 count 的值覆蓋 state.test.a 的值

總結(jié)

通過我第一時(shí)間體驗(yàn) Vue 3.0-beta 版本后，感覺 Vue 3.0 已經(jīng)具備了商業(yè)項(xiàng)目開發(fā)的必備條件，語(yǔ)法精煉，不管是代碼可讀性還是運(yùn)行效率都非常贊。但由于未深入使用，目前還無(wú)法提出更多問題，需要在項(xiàng)目實(shí)戰(zhàn)中進(jìn)一步發(fā)現(xiàn)和總結(jié)問題，再和大家分享交流。

到此這篇關(guān)于Vue 3.0 全家桶搶先體驗(yàn)的文章就介紹到這了,更多相關(guān)Vue 3.0 全家桶內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: