vue 3.0 體驗，vue 3.0新特性

2020 年 7 月 6 日
筆記
javascript, VUE, vue3.0

前言

昨天不是尤雨溪不是剛在B站直播玩了，分享了vue-next v3.0.0-beta.1 版本哈哈，

不要太刺激哦

6大亮點

Performance：性能更比Vue 2.0強。
Tree shaking support：可以將無用模組「剪輯」，僅打包需要的。
Composition API：組合API
Fragment, Teleport, Suspense：「碎片」，Teleport即Protal傳送門，「懸念」
Better TypeScript support：更優秀的Ts支援
Custom Renderer API：暴露了自定義渲染API

現在就馬上進入搭建吧

包括了

基於 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，
這些都是開發商業級項目必須的：

[](javascript:void(0)😉

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

[](javascript:void(0)😉

注意：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：

[](javascript:void(0)😉

<template>
  <div class="test">

vue3.0 初體驗

少年你的頭髮可還好，？？？？哈哈哈哈哈

  </div>
</template>

<script>
 export default {
 }
</script>

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

[](javascript:void(0)😉

創建路由

之後在 /src/router/index.js 中創建路由配置：

[](javascript:void(0)😉

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

[](javascript:void(0)😉

初始化 Vue Router 的過程與 3.0 版本變化不大，只是之前採用構造函數的方式，

這裡改為使用 createRouter 來創建 Vue Router 實例，

配置的方法基本一致，配置完成後我們還需要在 App.vue 中增加鏈接到 Test.vue 的路由：

[](javascript:void(0)😉

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

[](javascript:void(0)😉

啟動項目

npm run serve

狀態和事件綁定

Vue 3.0 中定義狀態的方法改為類似 React Hooks 的方法，下面我們在 Test.vue 中定義一個狀態 count：

[](javascript:void(0)😉

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

[](javascript:void(0)😉

Vue 3.0 中初始化狀態通過 setup 方法，

定義狀態需要調用 ref 方法。接下來我們定義一個事件，用來更新 count 狀態：

[](javascript:void(0)😉

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

[](javascript:void(0)😉

這裡的 add 方法不再需要定義在 methods 中，

但注意更新 count 值的時候不能直接使用 count++，而應使用 count.value++，

更新程式碼後，點擊按鈕，count 的值就會更新了：

計算屬性和監聽器

Vue 3.0 中計算屬性和監聽器的實現依賴 computed 和 watch 方法：

[](javascript:void(0)😉

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

[](javascript:void(0)😉

計算屬性 computed 是一個方法，裡面需要包含一個回調函數，當我們訪問計算屬性返回結果時，會自動獲取回調函數的值：

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

監聽器 watch 同樣是一個方法，它包含 2 個參數，2 個參數都是 function：

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

第一個參數是監聽的值，count.value 表示當 count.value 發生變化就會觸發監聽器的回調函數，即第二個參數，第二個參數可以執行監聽時候的回調

如果是2 個以上的監聽屬性就這樣

[](javascript:void(0)😉

watch(
  [refA, () => refB.value],
  ([a, b], [prevA, prevB]) => {
    console.log(`a is: ${a}`)
    console.log(`b is: ${b}`)
  }
)

[](javascript:void(0)😉

獲取路由

Vue 3.0 中通過 getCurrentInstance 方法獲取當前組件的實例，然後通過 ctx 屬性獲得當前上下文，

ctx.$router 是 Vue Router 實例，裡面包含了 currentRoute 可以獲取到當前的路由資訊

[](javascript:void(0)😉

<script>
  import { getCurrentInstance } from 'vue'

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

[](javascript:void(0)😉

Vuex 集成

Vuex 的集成方法如下：

定義 Vuex 狀態

第一步，修改 src/store/index.js 文件：

[](javascript:void(0)😉

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    test: {
      a: 1
    }
  },
  mutations: {
    setTestA(state, value) {
      state.test.a = value
    }
  },
  actions: {
  },
  modules: {
  }
})

[](javascript:void(0)😉

Vuex 的語法和 API 基本沒有改變,我們在 state 中創建了一個 test.a 狀態，在 mutations 中添加了修改 state.test.a 狀態的方法： setTestA

引用 Vuex 狀態

第二步，在 Test.vue 中，通過計算屬性使用 Vuex 狀態：

[](javascript:void(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>
  </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>

[](javascript:void(0)😉

這裡我們通過計算屬性來引用 Vuex 中的狀態：

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

ctx 是上節中我們提到的當前組件實例

更新 Vuex 狀態

更新 Vuex 狀態仍然使用 commit 方法，這點和 Vuex 3.0 版本一致：

[](javascript:void(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>

[](javascript:void(0)😉

這裡我們點擊 update a 按鈕後，會觸發 update 方法，此時會通過 ctx.$store.commit 調用 setTestA 方法，將 count 的值覆蓋 state.test.a 的值

總的效果呢是這樣的：

總結

vue3.0都寫在setup里，以前的所有數據狀態都寫在data里，

所有方法都寫在methods里，而現在可以根據功能模組把狀態和方法等劃分在一起，更利於模組化，

不過這樣對程式碼習慣和品質要求更高了，初學者用3.0可能會寫的更混亂

貌似 vue逐漸react化，存在即合理對吧哈哈

好怕vuex會被provide和inject特性給替換掉。

繼續搞吧哈哈

Tags: javascript VUE vue3.0

vue 3.0 體驗，vue 3.0新特性

前言

Vue 3.0 項目初始化

第一步，安裝 vue-cli：

第二步，初始化 vue 項目：

升級 Vue 3.0 項目

Vue 3.0 基本特性體驗

創建路由

vue3.0 初體驗

創建路由

啟動項目

狀態和事件綁定

計算屬性和監聽器

獲取路由

Vuex 集成

定義 Vuex 狀態

引用 Vuex 狀態

更新 Vuex 狀態

總結

VirMach 便宜 VPS

QNews

vue 3.0 體驗，vue 3.0新特性

前言

Vue 3.0 項目初始化

第一步，安裝 vue-cli：

第二步，初始化 vue 項目：

升級 Vue 3.0 項目

Vue 3.0 基本特性體驗

創建路由

vue3.0 初體驗

創建路由

啟動項目

狀態和事件綁定

計算屬性和監聽器

獲取路由

Vuex 集成

定義 Vuex 狀態

引用 Vuex 狀態

更新 Vuex 狀態

總結

分享此文：

Related Posts

數據結構003_鏈表

騰訊雲伺服器搭建網站教程【PHP+MYSQL環境】

米家膠囊咖啡機發布：10+口味 1分鐘即享

吐血整理！這篇帶你徹底理解主存中存儲單元地址的分配

VirMach 便宜 VPS

QNews

熱門搜尋