號外號外，VUE3.0beta版來了，趕緊來嚐鮮吧

就在17號4 點左右，vue-next v3.0.0-beta.1 版本發佈，這意味著 Vue 3.0 全家桶正式登場，發佈內容包括：

可以看到 Vue 3.0 beta 版本是一個項目系列，包含了我們在開發過程中需要的套件、webpack 插件等等，本文將帶大家快速搭建基於 Vue 3.0 的項目框架，這和之前很多 Vue 3.0 的 Demo 不同，是具備商業化項目能力的框架，本文將包括以下內容：

Vue 3.0 項目初始化

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

Vue 項目初始化

第一步，安裝 vue-cli：

<code>
npm
 install -g @vue/cli/<code>

第二步，初始化 vue 項目：

<code>vue 
create
 vue-
next
-
test
/<code>

輸入命令後，會出現命令行交互窗口，這裡我們選擇 Manually select features：

<code>Vue CLI v4
.3
.1
? Please pick a preset: 
  
default
 (babel, eslint) 
❯ Manually 
select
 features /<code>

隨後我們勾選：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，這些都是開發商業級項目必須的：

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

注意：Vue 3.0 項目目前需要從 Vue 2.0 項目升級而來，所以為了直接升級到 Vue 3.0 全家桶，我們需要在 Vue 項目創建過程中勾選 Router 和 Vuex，所以避免手動寫初始化代碼

回車後會自動安裝依賴，為了加速安裝速度，我們可以使用淘寶源來加快初始化速度：

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

項目創建完畢後，目錄結構如下：

<code>.
├── 
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
/<code> 

升級 Vue 3.0 項目

目前創建 Vue 3.0 項目需要通過插件升級的方式來實現，vue-cli 還沒有直接支持，我們進入項目目錄，並輸入以下指令：

<code>cd vue-
next
-test
vue add vue-
next
/<code>

執行上述指令後，會自動安裝 vue-cli-plugin-vue-next 插件，該插件會完成以下操作：

完成上述操作後，項目正式升級到 Vue 3.0，注意該插件還能支持 typescript，用 typescript 的同學還得再等等。

Vue 3.0 基本特性體驗

下面我們從項目開發的角度逐步體驗 Vue 3.0 的開發流程

創建路由

項目開發中，我們通常需要創建新頁面，然後添加路由配置，我們在 /src/views 目錄下創建 Test.vue：

<code>
<
template
>

  
<
div
 
class
=
"test"
>

    
<
h1
>
test page
h1
>

  
div
>

template
>


<
script
>

 
export 
 
default
 {
 }
script
>


<
style
 
lang
=
"less"
 
scoped
>

.test
 {
  
color
: red;
}
style
>
/<code>

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

<code>
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
(  
'../views/About.vue'
)
  },
  {
    
path
: 
'/test'
,
    
name
: 
'Test'
,
    
component
: 
()
 =>
 
import
(  
'../views/Test.vue'
)
  }
]

const
 router = createRouter({
  
history
: createWebHashHistory(),
  routes
})

export
  
default
 router/<code>

初始化 Vue Router 的過程與 3.0 版本變化不大，只是之前採用構造函數的方式，這裡改為使用 createRouter 來創建 Vue Router 實例，配置的方法基本一致，配置完成後我們還需要在 App.vue 中增加鏈接到 Test.vue 的路由：

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

啟動項目：

在瀏覽器中訪問項目地址，此時已經可以跳轉到 Test 頁面

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

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

Vue 3.0 中初始化狀態通過 setup 方法，定義狀態需要調用 ref 方法。接下來我們定義一個事件，用來更新 count 狀態：

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

這裡的 add 方法不再需要定義在 methods 中，但注意更新 count 值的時候不能直接使用 count++，而應使用 count.value++，更新代碼後，點擊按鈕，count 的值就會更新了

計算屬性和監聽器

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

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

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

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

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

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

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

獲取路由

Vue 3.0 中通過 getCurrentInstance 方法獲取當前組件的實例，然後通過 ctx 屬性獲得當前上下文，ctx.$router 是 Vue Router 實例，裡面包含了 currentRoute 可以獲取到當前的路由信息

<code>
<
script
>

  
import
 { getCurrentInstance } 
from
 
'vue'

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

Vuex 集成

Vuex 的集成方法如下：

定義 Vuex 狀態

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

<code>
import
 
Vuex from 'vuex'

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

  
},
  
actions
: 
{
  
},
  
modules
: 
{
  
}
})
/<code>

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

引用 Vuex 狀態

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

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

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

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

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

更新 Vuex 狀態

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

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

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

資源收集於網絡，如有侵權，請聯繫豬豬俠