建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我是沐華。最近一個(gè)粉絲公司項(xiàng)目由 Vue2 升級(jí)到 Vue3 了，他一下子不適應(yīng)，有好多不會(huì)用的，所以我就寫(xiě)了這篇開(kāi)發(fā)文檔，包含了 Vue3 開(kāi)發(fā)中使用的所有語(yǔ)法，希望所有像他一樣還不熟的伙伴快速上手 Vue3
成都創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),云巖網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:云巖等地區(qū)。云巖做網(wǎng)站價(jià)格咨詢(xún):028-86922220
本文所有語(yǔ)法為 Vue 3.2.41 版本，如果是3.0到3.2以?xún)?nèi)的版本個(gè)別地方可能會(huì)有些許不一樣。
開(kāi)發(fā)文檔
獲取 this
Vue2 中每個(gè)組件里使用 this 都指向當(dāng)前組件實(shí)例，this 上還包含了全局掛載的東西，都知道 this.xxx 啥都有
而 Vue3 中沒(méi)有 this，如果想要類(lèi)似的用法有兩種，一是獲取當(dāng)前組件實(shí)例，二是獲取全局實(shí)例，如下自己可以去打印出來(lái)看看
全局注冊(cè)(屬性/方法)
Vue2 中我們要往全局上掛載東西通常就是如下，然后在所有組件里都可以通過(guò) this.xxx 獲取到了
Vue.prototype.xxx = xxx
而 Vue3 中不能這么寫(xiě)了，換成了一個(gè)能被所有組件訪問(wèn)到的全局對(duì)象，就是上面說(shuō)的全局實(shí)例的那個(gè)對(duì)象，比如在 main.js 中做全局注冊(cè)
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局屬性
app.config.globalProperties.name = '沐華'
在其他組件中調(diào)用
獲取 DOM
初始化
Vue2 中進(jìn)入頁(yè)面就請(qǐng)求接口，或者其他一些初始化的操作，一般放在 created 或 mounted，而 Vue3 中 beforeCreated 和 created 這倆鉤子就不用了，因?yàn)?setup 在這倆之前執(zhí)行，還要這倆的話就多此一舉了
所以但凡是以前你用在 beforeCreated / created / beforeMounted / mounted 這幾個(gè)鉤子里的內(nèi)容，在 Vue3 中要么放在 setup 里，要么放在 onMounted 里
解除綁定
Vue2 中一般清除定時(shí)器、監(jiān)聽(tīng)之類(lèi)的操作有兩種方法：
- 一是用$once 搭配 hook: BeforeDestroy 使用，這個(gè) Vue3 不支持了
- 二是用 beforeDestroy / deactivated 這倆鉤子，Vue3 中只是把鉤子函數(shù)重命名了一下
ref 和 reactive
這兩都是用于創(chuàng)建響應(yīng)式對(duì)象，ref 通常用于創(chuàng)建基礎(chǔ)類(lèi)型，reactive 通常用于創(chuàng)建響應(yīng)式，這是官方推薦的，現(xiàn)實(shí)中也不盡然，有人也用 ref 來(lái)定義數(shù)組，也有人一個(gè)組件只定義一個(gè) reactive，所有數(shù)據(jù)都放里面，就像 Vue2 的 data 一樣，也有人都用
需要知道的有兩點(diǎn)：
- ref 如果傳入的是引用類(lèi)型，內(nèi)部源碼也是調(diào)用 reactive 來(lái)實(shí)現(xiàn)的
- ref 返回的屬性在 template 中使用，直接用就是了，但是在 JS 中使用，需要通過(guò) .value 獲取，如下。因?yàn)?ref 返回的是一個(gè)包裝對(duì)象
{{ count }}
為什么 ref 要返回一個(gè)包裝對(duì)象？Vue2 中 data 都是返回一個(gè)對(duì)象這都知道
因?yàn)閷?duì)象引用類(lèi)型，可以用來(lái)做代理或劫持，如果只返回基礎(chǔ)類(lèi)型的話，存儲(chǔ)在棧中，執(zhí)行棧里執(zhí)行完就回收了，沒(méi)有辦法添加代理或劫持，自然就沒(méi)辦法追蹤后續(xù)的變化，所以不得不返回一個(gè)對(duì)象，這樣才能有響應(yīng)式
toRef 和 toRefs
這兩共同點(diǎn)就是用來(lái)創(chuàng)建響應(yīng)式的引用的，主要用來(lái)取出響應(yīng)式對(duì)象里的屬性，或者解構(gòu)響應(yīng)式對(duì)象，解構(gòu)出來(lái)的屬性值依然是響應(yīng)式屬性，如果不用這兩直接解構(gòu)的話是會(huì)丟失響應(yīng)式效果的
主要就是方便我們使用直接變量 xxx，而不需要 data.xxx。并且我們修改 xxx 的時(shí)候也是直接修改源對(duì)象屬性的
這兩的區(qū)別：帶 s 和不帶 s，就是單數(shù)和復(fù)數(shù)嘛，意思就是取一個(gè)和取一堆咯
watch
watch 就是用來(lái)監(jiān)聽(tīng)一個(gè)已有屬性，發(fā)生變化的時(shí)候做某些操作，Vue2 中常用有如下三種寫(xiě)法
watch: {
userId: 'getData',
userName (newName, oldName) {
this.getData()
},
userInfo: {
handler (newVal, newVal) { this.getData() },
immediate: true,
deep: true
}
}而 Vue3 中監(jiān)聽(tīng)的寫(xiě)法就豐富得多了
Vue3 的 watch 是一個(gè)函數(shù)，能接收三個(gè)參數(shù)，參數(shù)一是監(jiān)聽(tīng)的屬性，參數(shù)二是接收新值和老值的回調(diào)函數(shù)，參數(shù)三是配置項(xiàng)
關(guān)于副作用，在 watch 回調(diào)函數(shù)中能接收第三個(gè)參數(shù)，為清除副作用的函數(shù)，它的執(zhí)行機(jī)制默認(rèn)在更新之前調(diào)用，比如如下代碼，當(dāng) key 觸發(fā)更新時(shí)會(huì)先打印 222 再打印 沐華，如果需要在更新之后調(diào)用，可以在 watch 第三個(gè)配置項(xiàng)中添加 flush: post，
// 回調(diào)函數(shù)接收一個(gè)參數(shù)，為清除副作用的函數(shù)
watch(key, (newKey, oldKey, onInvalidate) => {
console.log('沐華')
// 獲取DOM默認(rèn)獲取到的是更新前的dom，如果是flush: post，可以獲取到更新后的dom
console.log('DOM節(jié)點(diǎn)：', dom.innterHTML)
onInvalidate(() => {
console.log(2222)
})
})
監(jiān)聽(tīng)還沒(méi)完呢
尤大：嘿嘿~
watchEffect
Vue3 中除了 watch 還增加了一個(gè) watchEffect。區(qū)別是：
- watch 是對(duì)傳入的一個(gè)或多個(gè)值進(jìn)行監(jiān)聽(tīng)，觸發(fā)時(shí)會(huì)返回新值和老值，且默認(rèn)第一次不會(huì)執(zhí)行
- watchEffect 是傳入一個(gè)立即執(zhí)行函數(shù)，所以默認(rèn)第一次就會(huì)執(zhí)行，且不需要傳入監(jiān)聽(tīng)內(nèi)容，會(huì)自動(dòng)收集函數(shù)內(nèi)的數(shù)據(jù)源作為依賴(lài)，當(dāng)依賴(lài)發(fā)生變化時(shí)會(huì)重新執(zhí)行函數(shù)(有點(diǎn)像computed的味道)，而且不會(huì)返回新值和老值
- 清除副作用和副作用的刷新時(shí)機(jī)是一樣的，區(qū)別是 watch 中會(huì)作為回調(diào)的第三個(gè)參數(shù)傳入，watchEffect 中是回調(diào)函數(shù)的第一個(gè)參數(shù)
- 正常情況下組件銷(xiāo)毀/卸載后這兩都會(huì)自動(dòng)停止監(jiān)聽(tīng)，但也有例，比如異步的方式在 setTimeout 里創(chuàng)建的監(jiān)聽(tīng)就都需要手動(dòng)停止監(jiān)聽(tīng)，停止方式如下
// 停止監(jiān)聽(tīng)
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要的時(shí)候手動(dòng)停止監(jiān)聽(tīng)
unwatch()
unwatchEffect()
watchEffect 使用：
watchEffect 如果需要修改配置項(xiàng) flush 為 post 或 sync 時(shí)，可以直接使用別名，如下
watchEffect(() => {...}, {
flush: 'post',
})
// 和下面這個(gè)是一樣的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
flush: 'sync',
})
// 和下面這個(gè)是一樣的
watchSyncEffect(() => {})computed
Vue2 中 computed 最見(jiàn)的使用場(chǎng)景一般有：mapGetters/mapState 獲取狀態(tài)管理的屬性、 獲取 url 上的屬性、條件判斷、類(lèi)型轉(zhuǎn)換之類(lèi)的，支持函數(shù)和對(duì)象兩種寫(xiě)法
而 Vue3 中 computed 不再是一個(gè)對(duì)象，而是一個(gè)函數(shù)，用法其實(shí)基本差不多，函數(shù)第一個(gè)參數(shù)是偵聽(tīng)器源，用于返回計(jì)算的新值，也支持對(duì)象寫(xiě)法，第二個(gè)參數(shù)可用于調(diào)試
nextTick
nextTick 的使用方法，除了不能用 this 其他的和 Vue2 一模一樣，還是三種方式
mixins 和 hooks
Vue2 中邏輯的抽離復(fù)用一般用 mixins，缺點(diǎn)有三：
- 沒(méi)有獨(dú)立命名空間，mixins 會(huì)和組件內(nèi)部產(chǎn)生命名沖突
- 不去翻代碼不知道引入的 mixins 里面有啥
- 引入多個(gè) mixins 時(shí)不知道自己使用的是來(lái)自哪一個(gè) mixins 的
Vue3 中邏輯抽離復(fù)用的 hooks 語(yǔ)法，其實(shí)就是一個(gè)函數(shù)，可以傳參，拿返回值來(lái)用。或者可以這樣理解：平時(shí)要封裝公用的方法是怎么寫(xiě)的？Vue3 里就可以怎么寫(xiě)
// xxx.js
expport const getData = () => {}
export default function unInstance () {
...
return {...}
}
// xxx.vue
import unInstance, { getData } from 'xx.js'
const { ... } = unInstance()
onMounted(() => {
getData()
})
關(guān)于 hooks 如何寫(xiě)出更優(yōu)雅的代碼，還個(gè)需要多寫(xiě)，多實(shí)踐
組件通信
Vue3 組件通信的方式，有如下幾種
- props + defineProps
- defineEmits
- defineExpose / ref
- useAttrs
- v-model(支持多個(gè))
- provide / inject
- Vuex / Pinia
關(guān)于 Vue 組件通信的使用方式，去年我寫(xiě)過(guò)一篇文章，上面都羅列的很詳細(xì)了，就不搬過(guò)來(lái)了
Vue3的8種和Vue2的12種組件通信
多個(gè) v-model
Vue2 中每個(gè)組件上只能寫(xiě)一個(gè) v-model，子組件沒(méi)有寫(xiě) model 的話，默認(rèn)在 props 接收 value 即可，修改就是用 this.$emit('input') 事件
Vue3 中每個(gè)組件每個(gè)組件上支持寫(xiě)多個(gè) v-model，沒(méi)有了 .sync 和 model 重命名的操作，也不需要了，寫(xiě)v-model 的時(shí)候就需要把命名一起寫(xiě)上去了，如下：
// 父組件寫(xiě)法
// 子組件
狀態(tài)管理
Vuex 會(huì)的就不用說(shuō)了，不會(huì)的就直接學(xué) Pinia 吧
Pinia 的使用方式，我之前也寫(xiě)過(guò)一篇文章，也不搬過(guò)來(lái)了
上手 Vue 新的狀態(tài)管理 Pinia，一篇文章就夠了
路由
Vue2 中的 $route 和 $router 如下，可以自己打印出來(lái)看一下
template
Vue2 中只能有一個(gè)根節(jié)點(diǎn)，而 Vue3 中支持多個(gè)根節(jié)點(diǎn)，這個(gè)大家都知道
其實(shí)本質(zhì)上 Vue3 每個(gè)組件還是一個(gè)根節(jié)點(diǎn)，因?yàn)?DOM 樹(shù)只能是樹(shù)狀結(jié)構(gòu)的，只是 Vue3 在編譯階段新增了判斷，如果當(dāng)前組件不只一個(gè)根元素，就添加一個(gè) fragment 組件把這個(gè)多根組件的給包起來(lái)，相當(dāng)于這個(gè)組件還是只有一個(gè)根節(jié)點(diǎn)
1
2
CSS 樣式穿透
Vue2 中在 scoped 中修改子組件或者組件庫(kù)中的組件樣式，改不了的情況下，就可以用樣式穿透，不管是 Less 還是 SASS 都是用 /dee/ .class {} 來(lái)做樣式穿透，而 Vue3 中就不支持 /deep/ 的寫(xiě)法了，換成 :deep(.class)
// 別再這樣加一個(gè)沒(méi)有 scoped 的 style 標(biāo)簽了，全都加到全局上去了
//
CSS 綁定 JS 變量
就是 CSS 中可以使用 JS 的變量來(lái)賦值，如下
沐華
網(wǎng)頁(yè)名稱(chēng)：[保姆級(jí)]Vue3開(kāi)發(fā)文檔，不會(huì)的再不看要遭老罪咯
標(biāo)題路徑：http://m.5511xx.com/article/cocjphj.html
