vue3.0 上手體驗(yàn)
vue3.0 beta 版本已經(jīng)發(fā)布有一陣子了，是時(shí)候上手體驗(yàn)一波了～
注意，本文所有演示都是基于 vue3.0 beta 版本，不保證后續(xù)正式版 api 不改動(dòng)。等官方文檔出來后，以官網(wǎng)為準(zhǔn)。
環(huán)境搭建
直接使用腳手架，如果本地沒有安裝的可以執(zhí)行腳手架安裝命令：
npm install -g @vue/cli
如果本地安裝過的，可以嘗試更新一下：
npm update -g @vue/cli
測(cè)試 vue-cli 版本：
vue -V @vue/cli 4.4.1
接下來創(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)，一般開發(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í)慣選擇好，就開始創(chuàng)建項(xiàng)目。注意這時(shí)候還是 vue2 的項(xiàng)目環(huán)境，接下來就是升級(jí)為 vue3 的運(yùn)行環(huán)境。
升級(jí)為 vue3.0 項(xiàng)目
vue-cli 還沒有直接支持 vue3.0，需要依賴插件升級(jí)，輸入指令：
cd vue3-demo vue 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)來手動(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 的寫法。
創(chuàng)建vue實(shí)例
vue3 創(chuàng)建vue實(shí)例不需要使用 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ù)式風(fēng)格來創(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)來，只會(huì)打包你用到的 api，vue3 將都會(huì)使用這種形式。
響應(yīng)式數(shù)據(jù)、methods、watch 和 computed
這里應(yīng)該是改動(dòng)最大的部分，也是爭(zhē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ù)中進(jìn)行，而且添加 methods，watch 和 computed 都需要在 setup 中進(jìn)行。這就跟在vue2中有很大的不同，vue2中我們是使用選項(xiàng)的方式來創(chuàng)建 data、methods、watch 和 computed 的。
接下來演示一個(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>
來看這個(gè)例子，首先定義方法是可以直接定義在 setup 函數(shù)中的，然后 return 出去即可，不知可否注意到在方法里訪問 count 時(shí)，是使用 .value 方法訪問的，這里要強(qiáng)調(diào)一下，在 setup 中訪問已聲明的響應(yīng)式變量時(shí)，需要使用 .value 方式訪問，包括在 watch 和 computed 中。
接下來是定義 watch，需要手動(dòng)引入 watch 方法，這也是達(dá)到了 Tree-Shaking 的目的，使用到什么就引入什么，最后打包也只打包用到的 api，后面的 computed 也同理。
watch方法有兩個(gè)參數(shù)，都是函數(shù)，第一個(gè)函數(shù)返回要監(jiān)聽的值，第二個(gè)函數(shù)是回調(diào)函數(shù)，它兩個(gè)參數(shù)分別表示新值和舊值。
computed 方法返回計(jì)算過的值，最后需要 return 出去。用法如上，還是比較好理解的。
你也可以這樣聲明響應(yīng)式數(shù)據(jù)（使用 reactive）
前面說到聲明響應(yīng)式數(shù)據(jù)，需要使用 ref，其實(shí)你也可以使用 reactive 來一次聲明多個(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)在訪問變量，不能使用 .value 方式訪問了
const add = () => {
// state.count.value++ // 錯(cuò)誤
state.count++
}
return {
state,
add
}
}
}
</script>
reactive 和 ref
上面說到 ref 和 reactive，這里再簡(jiǎn)單說說。reactive 是接收一個(gè)普通對(duì)象，返回該對(duì)象的響應(yīng)式代理，它等同于 2.x 中的 Vue.observable()。
const obj = reactive({ count: 0 })
// obj 此時(shí)是一個(gè)響應(yīng)式的對(duì)象
// 訪問或修改，直接基于 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)你要訪問它的值時(shí)，需要 .value 拿到它的值。但是如果是在 setup 中返回且用到模板中時(shí)，在 {{}} 里不需要加 .value 訪問，在返回時(shí)已經(jīng)自動(dòng)解套。
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
setup() {
return {
count: ref(0), // 這里返回，在模板中無需 .value 訪問值
}
},
}
</script>
獲取路由信息
vue3.0 中使用 getCurrentInstance 方法獲取當(dāng)前組件實(shí)例，然后通過 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 基本沒變化，只是在組件中使用時(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)簡(jiǎn)易翻頁效果源碼分享
本文給大家分享了vue實(shí)現(xiàn)簡(jiǎn)易翻頁效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
這篇文章主要為大家介紹了Vue3?如何通過虛擬DOM更新頁面詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vuex子模塊調(diào)用子模塊的actions或mutations實(shí)現(xiàn)方式
這篇文章主要介紹了Vuex子模塊調(diào)用子模塊的actions或mutations實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vant彈出列表多選輸入框下拉選擇代碼(可直接復(fù)制使用)
vue項(xiàng)目無論是用element中的Select選擇器,還是使用公司維護(hù)的組件,都可以輕松實(shí)現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關(guān)于Vant彈出列表多選輸入框下拉選擇的相關(guān)資料,需要的朋友可以參考下2024-01-01
VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享 一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
本文主要介紹了vue+vite+diff.js使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章給大家分享了Vue實(shí)例以及生命周期的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2018-08-08
Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過實(shí)例代碼介紹了對(duì)輸入手機(jī)號(hào)做校驗(yàn)的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要給大家介紹了關(guān)于Vue如何使用Dayjs計(jì)算常用日期的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03