vue3.0 beta 版本已經(jīng)發(fā)布有一陣子了，是時(shí)候上手體驗(yàn)一波了～

注意，本文所有演示都是基于 vue3.0 beta 版本，不保證后續(xù)正式版 api 不改動(dòng)。等官方文檔出來(lái)后，以官網(wǎng)為準(zhǔn)。

環(huán)境搭建

直接使用腳手架，如果本地沒(méi)有安裝的可以執(zhí)行腳手架安裝命令：

npm install -g @vue/cli

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

npm update -g @vue/cli

測(cè)試 vue-cli 版本：

vue -V@vue/cli 4.4.1

接下來(lái)創(chuàng)建一個(gè)vue項(xiàng)目：

vue create vue3-demo

在出現(xiàn)的命令交互窗口選擇 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

隨后勾選以下選項(xiàng)，一般開(kāi)發(fā)商業(yè)項(xiàng)目都需要這些：

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

回車后根據(jù)自己的習(xí)慣選擇好，就開(kāi)始創(chuàng)建項(xiàng)目。注意這時(shí)候還是 vue2 的項(xiàng)目環(huán)境，接下來(lái)就是升級(jí)為 vue3 的運(yùn)行環(huán)境。

升級(jí)為 vue3.0 項(xiàng)目

vue-cli 還沒(méi)有直接支持 vue3.0，需要依賴插件升級(jí)，輸入指令：

cd vue3-demovue add vue-next

執(zhí)行完上述命令后，會(huì)自動(dòng)安裝 vue-cli-plugin-vue-next 插件，它會(huì)將項(xiàng)目升級(jí)為 vue3.0 的依賴環(huán)境，包括 vue-router 和 vuex 都會(huì)升級(jí)為 4.x 的版本。

最新版 vue-cli 可以直接創(chuàng)建 vue3 項(xiàng)目了（2020.09更新）

今天將 vue-cli 更新到了 4.5.4 版本，發(fā)現(xiàn)可以直接創(chuàng)建 vue3 項(xiàng)目了。使用 vue create vue3-demo 命令創(chuàng)建一個(gè)測(cè)試項(xiàng)目，會(huì)出現(xiàn)以下選項(xiàng)：

可以直接選擇默認(rèn)的 vue3 配置，也可以選擇最后一項(xiàng)來(lái)手動(dòng)配置，這里演示手動(dòng)配置，選擇 Manually select features，回車：

根據(jù)需要選擇，注意第一項(xiàng)表明了可以選擇 vue 版本，選完后回車：

這里選擇 vue 的版本，直接選擇 3.x 回車即可。這樣就能創(chuàng)建一個(gè)基于 vue3 搭建的項(xiàng)目了。

vue3.0 特性體驗(yàn)

按照上面步驟升級(jí)為 vue3.0 項(xiàng)目后，會(huì)自動(dòng)幫我們將一些文件改成 vue3.0 的寫(xiě)法。

創(chuàng)建vue實(shí)例

vue3 創(chuàng)建vue實(shí)例不需要使用 new 的方式了，來(lái)看 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’)

現(xiàn)在是函數(shù)式風(fēng)格來(lái)創(chuàng)建vue實(shí)例，還記得 vue2 是怎么創(chuàng)建實(shí)例的嗎，對(duì)比下：

// Vue2 創(chuàng)建實(shí)例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)})

你喜歡哪一種方式？我比較喜歡vue3.0的函數(shù)式風(fēng)格。

路由

看看路由配置文件：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

這是升級(jí)后路由配置方法，可以看到與 vue2 版本有很大的區(qū)別?，F(xiàn)在創(chuàng)建路由實(shí)例需要手動(dòng)引入 createRouter 方法，創(chuàng)建 history 模式路由也需要手動(dòng)引入 createWebHistory 方法，這達(dá)到 Tree-Shaking 的目的，即不會(huì)把所有的 api 都打包進(jìn)來(lái)，只會(huì)打包你用到的 api，vue3 將都會(huì)使用這種形式。

響應(yīng)式數(shù)據(jù)、methods、watch 和 computed

這里應(yīng)該是改動(dòng)最大的部分，也是爭(zhēng)議最大的部分，來(lái)看看怎么回事。

在vue2版本中，我們聲明響應(yīng)式數(shù)據(jù)是這樣的：

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

在vue3.0中，需要這樣：

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

我們要先引入 ref 方法，然后使用它來(lái)聲明響應(yīng)式變量。重要的是，這些操作需要在 setup 函數(shù)中進(jìn)行，而且添加 methods，watch 和 computed 都需要在 setup 中進(jìn)行。這就跟在vue2中有很大的不同，vue2中我們是使用選項(xiàng)的方式來(lái)創(chuàng)建 data、methods、watch 和 computed 的。

接下來(lái)演示一個(gè)計(jì)數(shù)器的功能，結(jié)合 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，需要手動(dòng)引入 watch 方法 watch( () => count.value, (val, oldVal) => { console.log(`new count: ${val}，old count: ${oldVal}`) } ) // 定義computed，同樣需要手動(dòng)引入 computed 方法 const doubleCount = computed(() => count.value * 2) return { count, add, doubleCount } }}</script>

來(lái)看這個(gè)例子，首先定義方法是可以直接定義在 setup 函數(shù)中的，然后 return 出去即可，不知可否注意到在方法里訪問(wèn) count 時(shí)，是使用 .value 方法訪問(wèn)的，這里要強(qiáng)調(diào)一下，在 setup 中訪問(wèn)已聲明的響應(yīng)式變量時(shí)，需要使用 .value 方式訪問(wèn)，包括在 watch 和 computed 中。

接下來(lái)是定義 watch，需要手動(dòng)引入 watch 方法，這也是達(dá)到了 Tree-Shaking 的目的，使用到什么就引入什么，最后打包也只打包用到的 api，后面的 computed 也同理。

watch方法有兩個(gè)參數(shù)，都是函數(shù)，第一個(gè)函數(shù)返回要監(jiān)聽(tīng)的值，第二個(gè)函數(shù)是回調(diào)函數(shù)，它兩個(gè)參數(shù)分別表示新值和舊值。

computed 方法返回計(jì)算過(guò)的值，最后需要 return 出去。用法如上，還是比較好理解的。

你也可以這樣聲明響應(yīng)式數(shù)據(jù)（使用 reactive）

前面說(shuō)到聲明響應(yīng)式數(shù)據(jù)，需要使用 ref，其實(shí)你也可以使用 reactive 來(lái)一次聲明多個(gè)變量，下面例子：

<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，同時(shí)定義多個(gè)變量 const state = reactive({ count: 0, str: ’hello’ }) // 現(xiàn)在訪問(wèn)變量，不能使用 .value 方式訪問(wèn)了 const add = () => { // state.count.value++ // 錯(cuò)誤 state.count++ } return { state, add } }}</script>

reactive 和 ref

上面說(shuō)到 ref 和 reactive，這里再簡(jiǎn)單說(shuō)說(shuō)。reactive 是接收一個(gè)普通對(duì)象，返回該對(duì)象的響應(yīng)式代理，它等同于 2.x 中的 Vue.observable()。

const obj = reactive({ count: 0 })// obj 此時(shí)是一個(gè)響應(yīng)式的對(duì)象// 訪問(wèn)或修改，直接基于 obj.count

ref 也是接收一個(gè)參數(shù)并返回一個(gè)響應(yīng)式且可改變的 ref 對(duì)象，一般參數(shù)是基礎(chǔ)類型，比如數(shù)值或字符串等。如果傳入的參數(shù)是一個(gè)對(duì)象，將會(huì)調(diào)用 reactive 方法進(jìn)行深層響應(yīng)轉(zhuǎn)換。ref 對(duì)象擁有一個(gè)指向內(nèi)部值的單一屬性 .value，即當(dāng)你要訪問(wèn)它的值時(shí)，需要 .value 拿到它的值。但是如果是在 setup 中返回且用到模板中時(shí)，在 {{}} 里不需要加 .value 訪問(wèn)，在返回時(shí)已經(jīng)自動(dòng)解套。

<template> <div>{{ count }}</div></template><script> export default { setup() { return { count: ref(0), // 這里返回，在模板中無(wú)需 .value 訪問(wèn)值 } }, }</script>

獲取路由信息

vue3.0 中使用 getCurrentInstance 方法獲取當(dāng)前組件實(shí)例，然后通過(guò) ctx 屬性獲取當(dāng)前上下文，ctx.$router 是路由實(shí)例，而 ctx.$router.currentRoute 就包含當(dāng)前路由信息。

<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: { }})

發(fā)現(xiàn)創(chuàng)建 store 實(shí)例的方式改變了，vue2 中是使用 new 的方式：

// Vue2 中創(chuàng)建 store 實(shí)例export default new Vuex.Store({ // ... })

一個(gè)小例子演示 vue3.0 中使用 store。

創(chuàng)建 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 基本沒(méi)變化，只是在組件中使用時(shí)需要引入 useStore 方法返回 store 實(shí)例，其實(shí)你也可以在當(dāng)前組件上下文中獲取 store，如下：

import {getCurrentInstance} from ’vue’// ...const store = getCurrentInstance().ctx.$store

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。