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

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 的過程與 3.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 3.0 中定義狀態的方法改為類似 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 的值就會更新了：

 

計算屬性和監聽器

Vue 3.0 中計算屬性和監聽器的實現依賴 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>

計算屬性 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 個以上的監聽屬性 就這樣

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 方法，這點和 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>

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

總的效果呢是這樣的：

 

 

 

 

總結下哈：

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

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

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

 

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

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

 

繼續搞吧 哈哈