vue3.0總結

vue3.0 beta 版本已經釋出有一陣子了，是時候上手體驗一波了～

注意，本文所有示範都是基于 vue3.0 beta 版本，不保證後續正式版 api 不改動。等官方文檔出來後，以官網為準。

環境搭建

直接使用腳手架，如果本地沒有安裝的可以執行腳手架安裝指令：

npm install -g @vue/cli

如果本地安裝過的，可以嘗試更新一下：

npm update -g @vue/cli

測試 vue-cli 版本：

vue -V
@vue/cli 4.4.1

接下來建立一個vue項目：

vue create vue3-demo

在出現的指令互動視窗選擇 Manually select features ：

Vue CLI v4.4.1
? Please pick a preset:
  常用配置 (router, vuex, sass, babel, eslint)
  sass (router, vuex, sass, babel, eslint)
  test (less, babel, eslint)
  default (babel, eslint)
❯ Manually select features

随後勾選以下選項，一般開發商業項目都需要這些：

Vue CLI v4.4.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

回車後根據自己的習慣選擇好，就開始建立項目。注意這時候還是 vue2 的項目環境，接下來就是更新為 vue3 的運作環境。

更新為 vue3.0 項目

vue-cli 還沒有直接支援 vue3.0，需要依賴插件更新，輸入指令：

cd vue3-demo
vue add vue-next

執行完上述指令後，會自動安裝 vue-cli-plugin-vue-next 插件，它會将項目更新為 vue3.0 的依賴環境，包括 vue-router 和 vuex 都會更新為 4.x 的版本。

vue3.0 特性體驗

按照上面步驟更新為 vue3.0 項目後，會自動幫我們将一些檔案改成 vue3.0 的寫法。

建立vue執行個體

vue3 建立vue執行個體不需要使用 new 的方式了，來看 src/main.js 檔案：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

現在是函數式風格來建立vue執行個體，還記得 vue2 是怎麼建立執行個體的嗎，對比下：

// Vue2 建立執行個體

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

路由

看看路由配置檔案：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

這是更新後路由配置方法，可以看到與 vue2 版本有很大的差別。現在建立路由執行個體需要手動引入 createRouter 方法，建立 history 模式路由也需要手動引入 createWebHistory 方法，這達到 Tree-Shaking 的目的，即不會把所有的 api 都打包進來，隻會打包你用到的 api，vue3 将都會使用這種形式。

響應式資料、methods、watch 和 computed

這裡應該是改動最大的部分，也是争議最大的部分，來看看怎麼回事。

在vue2版本中，我們聲明響應式資料是這樣的：

// Vue2
export default {
  // ....
  data() {
    return {
      state: {
        count: 0
      }
    };
  },
}

在vue3.0中，需要這樣：

// Vue3
import { ref } from 'vue'
export default {
  setup () {
    const count = ref(0) // 聲明 count，初始值為 0
    const str = ref('hello') // 聲明 str，初始值為 'hello'
    return {
      count,
      str
    }
  }
}

我們要先引入 ref 方法，然後使用它來聲明響應式變量。重要的是，這些操作需要在 setup 函數中進行，而且添加 methods，watch 和 computed 都需要在 setup 中進行。這就跟在vue2中有很大的不同，vue2中我們是使用選項的方式來建立 data、methods、watch 和 computed 的。

接下來示範一個計數器的功能，結合 methods、watch 和 computed：

<template>
  <div class="home">
   <p>count: {{count}}</p>
   <p>doubleCount: {{doubleCount}}</p>
   <button @click="add">增加</button>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue'
export default {
  setup () {
    // 聲明 count 變量，初始值為 0
    const count = ref(0)

    // 定義 add 方法
    const add = () => {
      count.value++
    }

    // 定義 watch，需要手動引入 watch 方法
    watch(
      () => count.value,
      (val, oldVal) => { console.log(`new count: ${val}，old count: ${oldVal}`) }
    )

    // 定義computed，同樣需要手動引入 computed 方法
    const doubleCount = computed(() => count.value * 2)

    return {
      count,
      add,
      doubleCount
    }
  }
}
</script>

來看這個例子，首先定義方法是可以直接定義在 setup 函數中的，然後 return 出去即可，不知可否注意到在方法裡通路 count 時，是使用 .value 方法通路的，這裡要強調一下，在 setup 中通路已聲明的響應式變量時，需要使用 .value 方式通路，包括在 watch 和 computed 中。

接下來是定義 watch，需要手動引入 watch 方法，這也是達到了 Tree-Shaking 的目的，使用到什麼就引入什麼，最後打包也隻打包用到的 api，後面的 computed 也同理。

watch方法有兩個參數，都是函數，第一個函數傳回要監聽的值，第二個函數是回調函數，它兩個參數分别表示新值和舊值。

computed 方法傳回計算過的值，最後需要 return 出去。用法如上，還是比較好了解的。

你也可以這樣聲明響應式資料（使用 reactive）

前面說到聲明響應式資料，需要使用 ref，其實你也可以使用 reactive 來一次聲明多個變量，下面例子：

<template>
  <div class="home">
    <p>str: {{state.str}}</p>
   <p>count: {{state.count}}</p>
   <button @click="add">增加</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup () {
    // 引入 reactive，同時定義多個變量
    const state = reactive({
      count: 0,
      str: 'hello'
    })

    // 現在通路變量，不能使用 .value 方式通路了
    const add = () => {
      // state.count.value++ // 錯誤
      state.count++
    }

    return {
      state,
      add
    }
  }
}
</script>

reactive 和 ref

上面說到 ref 和 reactive，這裡再簡單說說。reactive 是接收一個普通對象，傳回該對象的響應式代理，它等同于 2.x 中的 Vue.observable()。

const obj = reactive({ count: 0 })

// obj 此時是一個響應式的對象
// 通路或修改，直接基于 obj.count

ref 也是接收一個參數并傳回一個響應式且可改變的 ref 對象，一般參數是基礎類型，比如數值或字元串等。如果傳入的參數是一個對象，将會調用 reactive 方法進行深層響應轉換。ref 對象擁有一個指向内部值的單一屬性 .value，即當你要通路它的值時，需要 .value 拿到它的值。但是如果是在 setup 中傳回且用到模闆中時，在 {{}} 裡不需要加 .value 通路，在傳回時已經自動解套。

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      return {
        count: ref(0), // 這裡傳回，在模闆中無需 .value 通路值
      }
    },
  }
</script>

擷取路由資訊

vue3.0 中使用 getCurrentInstance 方法擷取目前元件執行個體，然後通過 ctx 屬性擷取目前上下文，ctx.$router 是路由執行個體，而 ctx.$router.currentRoute 就包含目前路由資訊。

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

vuex

檢視檔案 src/store/index.js：

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

發現建立 store 執行個體的方式改變了，vue2 中是使用 new 的方式：

// Vue2 中建立 store 執行個體
export default new Vuex.Store({
   // ... 
})

一個小例子示範 vue3.0 中使用 store。

建立 store：

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    count: 0
  },
  mutations: {
    ADD (state) {
      state.count++
    }
  },
  actions: {
    add ({ commit }) {
      commit('ADD')
    }
  },
  modules: {
  }
})

元件中使用store:

<template>
  <div class="home">
    <p>{{count}}</p>
    <button @click="add">增加</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    const count = computed(() => store.state.count)

    const add = () => {
      store.dispatch('add')
    }

    return {
      count,
      add
    }
  }
}
</script>

可以看到 vuex 的 api 基本沒變化，隻是在元件中使用時需要引入 useStore 方法傳回 store 執行個體，其實你也可以在目前元件上下文中擷取 store，如下：

import {getCurrentInstance} from 'vue'

// ...
const store = getCurrentInstance().ctx.$store

大概就記錄到這吧，基本涵蓋到了日常使用的方面。等待 vue3.0 的正式版吧。（還是那句話，上面所講隻是基于目前 vue3.0 beta 版本，不保證後續 api 不改動，等正式版官方文檔吧）

vue3.0總結

環境搭建

更新為 vue3.0 項目

最新版 vue-cli 可以直接建立 vue3 項目了（2020.09更新）

vue3.0 特性體驗

建立vue執行個體

路由

響應式資料、methods、watch 和 computed

你也可以這樣聲明響應式資料（使用 reactive）

reactive 和 ref

擷取路由資訊

vuex

繼續閱讀

vue中父元件調用子元件的方法

Vue監視資料原理

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

VueX 做狀态管理( state , mutations , getters , actions 概念)

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目