[保姆級] Vue3 開發文件,不會的再不看要遭老罪咯

沐華發表於2023-04-10

大家好,我是沐華。​最近一個粉絲公司專案由 Vue2 升級到 Vue3 了,他一下子不適應,有好多不會用的,所以我就寫了這篇開發文件,包含了 Vue3 開發中使用的所有語法,希望所有像他一樣還不熟的夥伴快速上手 Vue3

本文所有語法為 Vue 3.2.41 版本,如果是3.0到3.2以內的版本個別地方可能會有些許不一樣

開發文件

獲取 this

Vue2 中每個元件裡使用 this 都指向當前元件例項,this 上還包含了全域性掛載的東西,都知道 this.xxx 啥都有

而 Vue3 中沒有 this,如果想要類似的用法有兩種,一是獲取當前元件例項,二是獲取全域性例項,如下自己可以去列印出來看看

<script setup>
import { getCurrentInstance } from 'vue'

// proxy 就是當前元件例項,可以理解為元件級別的 this,沒有全域性的、路由、狀態管理之類的
const { proxy, appContext } = getCurrentInstance()

// 這個 global 就是全域性例項
const global = appContext.config.globalProperties
</script>

全域性註冊(屬性/方法)

Vue2 中我們要往全域性上掛載東西通常就是如下,然後在所有元件裡都可以透過 this.xxx 獲取到了

Vue.prototype.xxx = xxx

而 Vue3 中不能這麼寫了,換成了一個能被所有元件訪問到的全域性物件,就是上面說的全域性例項的那個物件,比如在 main.js 中做全域性註冊

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 新增全域性屬性
app.config.globalProperties.name = '沐華'

在其他元件中呼叫

<script setup>
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()

const global = appContext.config.globalProperties
console.log(global.name) // 沐華
</script>

獲取 DOM

<template>
    <el-form ref="formRef"></el-form>
    <child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import { getCurrentInstance } from 'vue'
import { ElForm } from 'element-plus'

// 方法一,這個變數名和 DOM 上的 ref 屬性必須同名,會自動形成繫結
const formRef = ref(null)
console.log(formRef.value) // 這就獲取到 DOM 了

// 方法二
const { proxy } = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => { ... })

// 方法三,比如在 ts 裡,可以直接獲取到元件型別
// 可以這樣獲取子元件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也可以這樣 獲取 element ui 的元件型別
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
</script>

初始化

Vue2 中進入頁面就請求介面,或者其他一些初始化的操作,一般放在 createdmounted,而 Vue3 中 beforeCreatedcreated 這倆鉤子就不用了,因為 setup 在這倆之前執行,還要這倆的話就多此一舉了

所以但凡是以前你用在 beforeCreated / created / beforeMounted / mounted 這幾個鉤子裡的內容,在 Vue3 中要麼放在 setup 裡,要麼放在 onMounted

<script setup>
import { onMounted } from 'vue'

// 請求介面函式
const getData = () => {
    xxxApi.then(() => { ... })
}

onMounted(() => {
    getData()
})
</script>

解除繫結

Vue2 中一般清除定時器、監聽之類的操作有兩種方法:

  • 一是用$once 搭配 hook: BeforeDestroy 使用,這個 Vue3 不支援了
  • 二是用 beforeDestroy / deactivated 這倆鉤子,Vue3 中只是把鉤子函式重新命名了一下
<script setup>
import { onBeforeUnmount, onDeactivated } from 'vue'

// 元件解除安裝前,對應 Vue2 的 beforeDestroy
onBeforeUnmount(() => {
    clearTimeout(timer)
    window.removeAddEventListener('...')
})

// 退出快取元件,對應 Vue2 的 deactivated
onDeactivated(() => {
    clearTimeout(timer)
    window.removeAddEventListener('...')
})
</script>

ref 和 reactive

這兩都是用於建立響應式物件,ref 通常用於建立基礎型別,reactive 通常用於建立響應式,這是官方推薦的,現實中也不盡然,有人也用 ref 來定義陣列,也有人一個元件只定義一個 reactive,所有資料都放裡面,就像 Vue2 的 data 一樣,也有人都用

需要知道的有兩點:

  • ref 如果傳入的是引用型別,內部原始碼也是呼叫 reactive 來實現的
  • ref 返回的屬性在 template 中使用,直接用就是了,但是在 JS 中使用,需要透過 .value 獲取,如下。因為 ref 返回的是一個包裝物件
<template>
    <div>{{ count }}</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const count = ref(1)

// 有人這麼用 
const arr = ref([])
console.log(arr.value) // []

// 也有人這麼用,一個元件裡所有的屬性全部定義在一個物件裡,有點 Vue2 data 的味道
const data = reactive({
    name: '沐華',
    age: 18,
    ...
})
console.log(data.name) // 沐華

// 也有人一個元件裡 ref 和 reactive 兩種都用,隨便你
</script>

為什麼 ref 要返回一個包裝物件?Vue2 中 data 都是返回一個物件這都知道

因為物件引用型別,可以用來做代理或劫持,如果只返回基礎型別的話,儲存在棧中,執行棧裡執行完就回收了,沒有辦法新增代理或劫持,自然就沒辦法追蹤後續的變化,所以不得不返回一個物件,這樣才能有響應式

toRef 和 toRefs

這兩共同點就是用來建立響應式的引用的,主要用來取出響應式物件裡的屬性,或者解構響應式物件,解構出來的屬性值依然是響應式屬性,如果不用這兩直接解構的話是會丟失響應式效果的

主要就是方便我們使用直接變數 xxx,而不需要 data.xxx。並且我們修改 xxx 的時候也是直接修改源物件屬性的

這兩的區別:帶 s 和不帶 s,就是單數和複數嘛,意思就是取一個和取一堆咯

<script setup>
import { reactive, toRef, toRefs } from 'vue'

const data = reactive({
    name: '沐華',
    age: 18
})

// 這樣雖然能拿到 name / age,但是會變成普通變數,沒有響應式效果了
const { name, age } = data

// 取出來一個響應式屬性
const name = toRef(data, 'name')

// 這樣解構出來的所有屬性都是有響應式的
const { name, age } = toRefs(data)

// 不管是 toRef 還是 toRefs,這樣修改是會把 data 裡的 name 改掉的
// 就是會改變源物件屬性,這才是響應式該有的樣子
name.value = '沐沐華華'
</script>

watch

watch 就是用來監聽一個已有屬性,發生變化的時候做某些操作,Vue2 中常用有如下三種寫法

watch: {
    userId: 'getData',
    userName (newName, oldName) {
        this.getData()
    },
    userInfo: {
        handler (newVal, newVal) { this.getData() },
        immediate: true,
        deep: true
    }
}

而 Vue3 中監聽的寫法就豐富得多了

Vue3 的 watch 是一個函式,能接收三個引數,引數一是監聽的屬性,引數二是接收新值和老值的回撥函式,引數三是配置項

<script setup>
import { watch, ref, reactive } from 'vue'

const name = ref('沐華')
const data = reactive({
    age: 18,
    money: 100000000000000000000,
    children: []
})

// 監聽 ref 屬性
watch(name, (newName, oldName) => { ... })

// 監聽其他屬性、路由或者狀態管理的都這樣
watch(
    () => data.age, 
    (newAge, oldAge) => { ... }
)

// 監聽多個屬性,陣列放多個值,返回的新值和老值也是陣列形式
watch([data.age, data.money], ([newAge, oldAge], [newMoney, oldMoney]) => { ... })

// 第三個引數是一個物件,為可配置項,有5個可配置屬性
watch(data.children, (newList, oldList) => { ... }, {
    // 這兩個和 Vue2 一樣,沒啥說的
    immediate: true,
    deep: true,
    // 回撥函式的執行時機,預設在元件更新之前呼叫。更新後呼叫改成post
    flush: 'pre', // 預設值是 pre,可改成 post 或 sync
    // 下面兩個是除錯用的
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})
</script>

關於副作用,在 watch 回撥函式中能接收第三個引數,為清除副作用的函式,它的執行機制預設在更新之前呼叫,比如如下程式碼,當 key 觸發更新時會先列印 222 再列印 沐華,如果需要在更新之後呼叫,可以在 watch 第三個配置項中新增 flush: post

// 回撥函式接收一個引數,為清除副作用的函式
watch(key, (newKey, oldKey, onInvalidate) => {
    console.log('沐華')
    // 獲取DOM預設獲取到的是更新前的dom,如果是flush: post,可以獲取到更新後的dom
    console.log('DOM節點:', dom.innterHTML)
    onInvalidate(() => {
        console.log(2222)
    })
})

監聽還沒完呢

尤大:嘿嘿~

watchEffect

Vue3 中除了 watch 還增加了一個 watchEffect。區別是:

  • watch 是對傳入的一個或多個值進行監聽,觸發時會返回新值和老值,且預設第一次不會執行
  • watchEffect 是傳入一個立即執行函式,所以預設第一次就會執行,且不需要傳入監聽內容,會自動收集函式內的資料來源作為依賴,當依賴發生變化時會重新執行函式(有點像computed的味道),而且不會返回新值和老值
  • 清除副作用和副作用的重新整理時機是一樣的,區別是 watch 中會作為回撥的第三個引數傳入,watchEffect 中是回撥函式的第一個引數
  • 正常情況下元件銷燬/解除安裝後這兩都會自動停止監聽,但也有例,比如非同步的方式在 setTimeout 裡建立的監聽就都需要手動停止監聽,停止方式如下
// 停止監聽
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要的時候手動停止監聽
unwatch()
unwatchEffect()

watchEffect 使用:

<script setup>
import { watchEffect } from 'vue'

// 正常使用
watchEffect(() => {
    // 會自動收集這個函式使用到的屬性作為依賴,進行監聽
    // 監聽的是 userInfo.name 屬性,不會監聽 userInfo
    console.log(userInfo.name)
})

// 有兩個引數,引數一是觸發監聽回撥函式,引數二是可選配置項
watchEffect(() => {...}, {
    // 這裡是可配置項,意思和 watch 是一樣的,不過這隻有3個可配置的
    flush: 'pre',
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})

// 回撥函式接收一個引數,為清除副作用的函式,和 watch 的同理
watchEffect(onInvalidate => {
    console.log('沐華')
    onInvalidate(() => {
        console.log(2222)
    })
})
</script>

watchEffect 如果需要修改配置項 flush 為 post 或 sync 時,可以直接使用別名,如下

watchEffect(() => {...}, {
    flush: 'post',
})
// 和下面這個是一樣的
watchPostEffect(() => {})
-----------------------------
watchEffect(() => {...}, {
    flush: 'sync',
})
// 和下面這個是一樣的
watchSyncEffect(() => {})

computed

Vue2 中 computed 最見的使用場景一般有: mapGetters/mapState 獲取狀態管理的屬性、 獲取 url 上的屬性、條件判斷、型別轉換之類的,支援函式和物件兩種寫法

而 Vue3 中 computed 不再是一個物件,而是一個函式,用法其實基本差不多,函式第一個引數是偵聽器源,用於返回計算的新值,也支援物件寫法,第二個引數可用於除錯

<script setup>
import { computed } from 'vue'

// 獲取 url 上的 type 屬性
const type = computed(() => Number(this.$route.query.type || '0'))

// 物件寫法
const visible = computed({
    get () { return this.visible },
    set (val) { this.$emit('input', val) }
})

// computed 第二個引數也是一個物件,除錯用的
const hehe = computed(引數一上面兩種都可, {
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})
</script>

nextTick

nextTick 的使用方法,除了不能用 this 其他的和 Vue2 一模一樣,還是三種方式

<script setup>
import { nextTick} from 'vue'

// 方式 一
const handleClick = async () => {
  await nextTick()
  console.log('沐華')
}

// 方式二
nextTick(() => {
    console.log('沐華')
})

// 方式三
nextTick().then(() => {
    console.log('沐華')
  })
</script>

mixins 和 hooks

Vue2 中邏輯的抽離複用一般用 mixins,缺點有三:

  • 沒有獨立名稱空間,mixins 會和元件內部產生命名衝突
  • 不去翻程式碼不知道引入的 mixins 裡面有啥
  • 引入多個 mixins 時不知道自己使用的是來自哪一個 mixins 的

Vue3 中邏輯抽離複用的 hooks 語法,其實就是一個函式,可以傳參,拿返回值來用。或者可以這樣理解:平時要封裝公用的方法是怎麼寫的?Vue3 裡就可以怎麼寫

// xxx.js
expport const getData = () => {}
export default function unInstance () {
    ...
    return {...}
}

// xxx.vue
import unInstance, { getData } from 'xx.js'
const { ... } = unInstance()
onMounted(() => {
    getData()
})

關於 hooks 如何寫出更優雅的程式碼,還個需要多寫,多實踐

元件通訊

Vue3 元件通訊的方式,有如下幾種

  • props + defineProps
  • defineEmits
  • defineExpose / ref
  • useAttrs
  • v-model(支援多個)
  • provide / inject
  • Vuex / Pinia

關於 Vue 元件通訊的使用方式,去年我寫過一篇文章,上面都羅列的很詳細了,就不搬過來了

Vue3的8種和Vue2的12種元件通訊

多個 v-model

Vue2 中每個元件上只能寫一個 v-model,子元件沒有寫 model 的話,預設在 props 接收 value 即可,修改就是用 this.$emit('input') 事件

Vue3 中每個元件每個元件上支援寫多個 v-model,沒有了 .syncmodel 重新命名的操作,也不需要了,寫v-model 的時候就需要把命名一起寫上去了,如下:

// 父元件寫法
<template>
    <child v-model:name="name" v-model:age="age" />
</template>
<script setup>
import { ref } from "vue"
const name = ref('沐華')
const age = ref(18)
</script>

// 子元件
<script setup>
const emit = defineEmits(['update:name', 'update:age'])

const handleClick = () => {
    console.log('點選了')
    emit('update:name', '這是新的名字')
}
</script>

狀態管理

Vuex 會的就不用說了,不會的就直接學 Pinia 吧

Pinia 的使用方式,我之前也寫過一篇文章,也不搬過來了

上手 Vue 新的狀態管理 Pinia,一篇文章就夠了

路由

Vue2 中的 $route$router 如下,可以自己列印出來看一下

<script setup>
import { useRoute, useRouter } from "vue-router"

// route 對應 this.$route
const route = useRoute()

// router 對應 this.$router
const router = useRouter()
</script>

template

Vue2 中只能有一個根節點,而 Vue3 中支援多個根節點,這個大家都知道

其實本質上 Vue3 每個元件還是一個根節點,因為 DOM 樹只能是樹狀結構的,只是 Vue3 在編譯階段新增了判斷,如果當前元件不只一個根元素,就新增一個 fragment 元件把這個多根元件的給包起來,相當於這個元件還是隻有一個根節點

<template>
    <div>1</div>
    <div>2</div>
</template>

CSS 樣式穿透

Vue2 中在 scoped 中修改子元件或者元件庫中的元件樣式,改不了的情況下,就可以用樣式穿透,不管是 Less 還是 SASS 都是用 /dee/ .class {} 來做樣式穿透,而 Vue3 中就不支援 /deep/ 的寫法了,換成 :deep(.class)

<style scoped>
// 這樣寫不生效的話
.el-form {
    .el-form-item { ... }
}
// Vue2 中這樣寫
/deep/ .el-form {
    .el-form-item { ... }
}
// Vue3 中這樣寫
:deep(.el-form) {
    .el-form-item { ... }
}
</style>

// 別再這樣加一個沒有 scoped 的 style 標籤了,全都加到全域性上去了
// <style lang="scss">
//  .el-form {
//     .el-form-item { ... }
//  }
// </style>

CSS 繫結 JS 變數

就是 CSS 中可以使用 JS 的變數來賦值,如下

<template>
    <div class="name">沐華</div>
</template>
<script setup>
import { ref } from "vue"
const str = ref('#f00') // 紅色
</script>
<style scoped lang="scss">
.name {
    background-color: v-bind(str); // JS 中的色值變數 #f00 就賦值到這來了
}
</style>

結語

如果本文對你有一點點幫助,點個贊支援一下吧,你的每一個【贊】都是我創作的最大動力 ^_^

更多前端文章,或者加入前端交流群,歡迎關注公眾號【前端快樂多】,大家一起共同交流和進步呀

相關文章