vue3.0 上手體驗
vue3.0 beta 版本已經(jīng)發(fā)布有一陣子了，是時候上手體驗一波了～
注意，本文所有演示都是基于 vue3.0 beta 版本，不保證后續(xù)正式版 api 不改動。等官方文檔出來后，以官網(wǎng)為準。
環(huán)境搭建
直接使用腳手架，如果本地沒有安裝的可以執(zhí)行腳手架安裝命令：
npm install -g @vue/cli
如果本地安裝過的，可以嘗試更新一下：
npm update -g @vue/cli
測試 vue-cli 版本：
vue -V @vue/cli 4.4.1
接下來創(chuàng)建一個vue項目：
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
隨后勾選以下選項，一般開發(fā)商業(yè)項目都需要這些：
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ù)自己的習慣選擇好，就開始創(chuàng)建項目。注意這時候還是 vue2 的項目環(huán)境，接下來就是升級為 vue3 的運行環(huán)境。
升級為 vue3.0 項目
vue-cli 還沒有直接支持 vue3.0，需要依賴插件升級，輸入指令：
cd vue3-demo vue add vue-next
執(zhí)行完上述命令后，會自動安裝 vue-cli-plugin-vue-next 插件，它會將項目升級為 vue3.0 的依賴環(huán)境，包括 vue-router 和 vuex 都會升級為 4.x 的版本。
最新版 vue-cli 可以直接創(chuàng)建 vue3 項目了（2020.09更新）
今天將 vue-cli 更新到了 4.5.4 版本，發(fā)現(xiàn)可以直接創(chuàng)建 vue3 項目了。使用 vue create vue3-demo 命令創(chuàng)建一個測試項目，會出現(xiàn)以下選項：
可以直接選擇默認的 vue3 配置，也可以選擇最后一項來手動配置，這里演示手動配置，選擇 Manually select features，回車：
根據(jù)需要選擇，注意第一項表明了可以選擇 vue 版本，選完后回車：
這里選擇 vue 的版本，直接選擇 3.x 回車即可。這樣就能創(chuàng)建一個基于 vue3 搭建的項目了。
vue3.0 特性體驗
按照上面步驟升級為 vue3.0 項目后，會自動幫我們將一些文件改成 vue3.0 的寫法。
創(chuàng)建vue實例
vue3 創(chuàng)建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')
現(xiàn)在是函數(shù)式風格來創(chuàng)建vue實例，還記得 vue2 是怎么創(chuàng)建實例的嗎，對比下：
// Vue2 創(chuàng)建實例
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ù)式風格。
路由
看看路由配置文件：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 版本有很大的區(qū)別?，F(xiàn)在創(chuàng)建路由實例需要手動引入 createRouter 方法，創(chuàng)建 history 模式路由也需要手動引入 createWebHistory 方法，這達到 Tree-Shaking 的目的，即不會把所有的 api 都打包進來，只會打包你用到的 api，vue3 將都會使用這種形式。
響應(yīng)式數(shù)據(jù)、methods、watch 和 computed
這里應(yīng)該是改動最大的部分，也是爭議最大的部分，來看看怎么回事。
在vue2版本中，我們聲明響應(yīng)式數(shù)據(jù)是這樣的：
// 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 方法，然后使用它來聲明響應(yīng)式變量。重要的是，這些操作需要在 setup 函數(shù)中進行，而且添加 methods，watch 和 computed 都需要在 setup 中進行。這就跟在vue2中有很大的不同，vue2中我們是使用選項的方式來創(chuàng)建 data、methods、watch 和 computed 的。
接下來演示一個計數(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，需要手動引入 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 函數(shù)中的，然后 return 出去即可，不知可否注意到在方法里訪問 count 時，是使用 .value 方法訪問的，這里要強調(diào)一下，在 setup 中訪問已聲明的響應(yīng)式變量時，需要使用 .value 方式訪問，包括在 watch 和 computed 中。
接下來是定義 watch，需要手動引入 watch 方法，這也是達到了 Tree-Shaking 的目的，使用到什么就引入什么，最后打包也只打包用到的 api，后面的 computed 也同理。
watch方法有兩個參數(shù)，都是函數(shù)，第一個函數(shù)返回要監(jiān)聽的值，第二個函數(shù)是回調(diào)函數(shù)，它兩個參數(shù)分別表示新值和舊值。
computed 方法返回計算過的值，最后需要 return 出去。用法如上，還是比較好理解的。
你也可以這樣聲明響應(yīng)式數(shù)據(jù)（使用 reactive）
前面說到聲明響應(yīng)式數(shù)據(jù)，需要使用 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'
})
// 現(xiàn)在訪問變量，不能使用 .value 方式訪問了
const add = () => {
// state.count.value++ // 錯誤
state.count++
}
return {
state,
add
}
}
}
</script>
reactive 和 ref
上面說到 ref 和 reactive，這里再簡單說說。reactive 是接收一個普通對象，返回該對象的響應(yīng)式代理，它等同于 2.x 中的 Vue.observable()。
const obj = reactive({ count: 0 })
// obj 此時是一個響應(yīng)式的對象
// 訪問或修改，直接基于 obj.count
ref 也是接收一個參數(shù)并返回一個響應(yīng)式且可改變的 ref 對象，一般參數(shù)是基礎(chǔ)類型，比如數(shù)值或字符串等。如果傳入的參數(shù)是一個對象，將會調(diào)用 reactive 方法進行深層響應(yīng)轉(zhuǎn)換。ref 對象擁有一個指向內(nèi)部值的單一屬性 .value，即當你要訪問它的值時，需要 .value 拿到它的值。但是如果是在 setup 中返回且用到模板中時，在 {{}} 里不需要加 .value 訪問，在返回時已經(jīng)自動解套。
<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: {
}
})
發(fā)現(xiàn)創(chuàng)建 store 實例的方式改變了，vue2 中是使用 new 的方式：
// Vue2 中創(chuàng)建 store 實例
export default new Vuex.Store({
// ...
})
一個小例子演示 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 基本沒變化，只是在組件中使用時需要引入 useStore 方法返回 store 實例，其實你也可以在當前組件上下文中獲取 store，如下：
import {getCurrentInstance} from 'vue'
// ...
const store = getCurrentInstance().ctx.$store
大概就記錄到這吧，基本涵蓋到了日常使用的方面。等待 vue3.0 的正式版吧。（還是那句話，上面所講只是基于目前 vue3.0 beta 版本，不保證后續(xù) api 不改動，等正式版官方文檔吧）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實例代碼,本文給大家介紹的非常詳細，具有一定的參考借鑒加載，需要的朋友可以參考下2018-08-08
本文主要介紹了Element的Message彈窗重復(fù)彈出，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue中使用JWT進行身份認證也是一種常見的方式,它能夠更好地保護用戶的信息,本文主要介紹了Vue開發(fā)中Jwt的使用詳解,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了VUE中V-IF條件判斷改變元素的樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨想過來看看吧2020-08-08
這篇文章主要介紹了Vue.js子組件向父組件通信的方法實例代碼，非常不錯，具有一定的參考價借鑒價值，需要的朋友可以參考下2018-12-12
本文主要介紹了Vuex3和Vuex4有哪些區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-04-04
vue+vue-router轉(zhuǎn)場動畫的實例代碼
今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場動畫的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解實現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義多選按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07