日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

大家好，我是沐華。最近一個粉絲公司項目由 Vue2 升級到 Vue3 了，他一下子不適應(yīng)，有好多不會用的，所以我就寫了這篇開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語法，希望所有像他一樣還不熟的伙伴快速上手 Vue3

本文所有語法為 Vue 3.2.41 版本，如果是3.0到3.2以內(nèi)的版本個別地方可能會有些許不一樣。

開發(fā)文檔

獲取 this

Vue2 中每個組件里使用 this 都指向當(dāng)前組件實例，this 上還包含了全局掛載的東西，都知道 this.xxx 啥都有

而 Vue3 中沒有 this，如果想要類似的用法有兩種，一是獲取當(dāng)前組件實例，二是獲取全局實例，如下自己可以去打印出來看看

 

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

// proxy 就是當(dāng)前組件實例，可以理解為組件級別的 this，沒有全局的、路由、狀態(tài)管理之類的
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 = '沐華'

 

在其他組件中調(diào)用

<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 中進(jìn)入頁面就請求接口，或者其他一些初始化的操作，一般放在 created 或 mounted，而 Vue3 中 beforeCreated 和 created 這倆鉤子就不用了，因為 setup 在這倆之前執(zhí)行，還要這倆的話就多此一舉了

所以但凡是以前你用在 beforeCreated / created / beforeMounted / mounted 這幾個鉤子里的內(nèi)容，在 Vue3 中要么放在 setup 里，要么放在 onMounted 里

 

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

// 請求接口函數(shù)
const getData = () => {
    xxxApi.then(() => { ... })
}

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

 

解除綁定

Vue2 中一般清除定時器、監(jiān)聽之類的操作有兩種方法：

• 一是用$once 搭配 hook: BeforeDestroy 使用，這個 Vue3 不支持了
• 二是用 beforeDestroy / deactivated 這倆鉤子，Vue3 中只是把鉤子函數(shù)重命名了一下

 

<script setup>
import { onBeforeUnmount, onDeactivated } from 'vue'

// 組件卸載前，對應(yīng) Vue2 的 beforeDestroy
onBeforeUnmount(() => {
    clearTimeout(timer)
    window.removeAddEventListener('...')
})

// 退出緩存組件，對應(yīng) Vue2 的 deactivated
onDeactivated(() => {
    clearTimeout(timer)
    window.removeAddEventListener('...')
})
</script>

 

ref 和 reactive

這兩都是用于創(chuàng)建響應(yīng)式對象，ref 通常用于創(chuàng)建基礎(chǔ)類型，reactive 通常用于創(chuàng)建響應(yīng)式，這是官方推薦的，現(xiàn)實中也不盡然，有人也用 ref 來定義數(shù)組，也有人一個組件只定義一個 reactive，所有數(shù)據(jù)都放里面，就像 Vue2 的 data 一樣，也有人都用

需要知道的有兩點：

• ref 如果傳入的是引用類型，內(nèi)部源碼也是調(diào)用 reactive 來實現(xiàn)的
• 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 都是返回一個對象這都知道

因為對象引用類型，可以用來做代理或劫持，如果只返回基礎(chǔ)類型的話，存儲在棧中，執(zhí)行棧里執(zhí)行完就回收了，沒有辦法添加代理或劫持，自然就沒辦法追蹤后續(xù)的變化，所以不得不返回一個對象，這樣才能有響應(yīng)式

toRef 和 toRefs

這兩共同點就是用來創(chuàng)建響應(yīng)式的引用的，主要用來取出響應(yīng)式對象里的屬性，或者解構(gòu)響應(yīng)式對象，解構(gòu)出來的屬性值依然是響應(yīng)式屬性，如果不用這兩直接解構(gòu)的話是會丟失響應(yīng)式效果的

主要就是方便我們使用直接變量 xxx，而不需要 data.xxx。并且我們修改 xxx 的時候也是直接修改源對象屬性的

這兩的區(qū)別：帶 s 和不帶 s，就是單數(shù)和復(fù)數(shù)嘛，意思就是取一個和取一堆咯

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

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

// 這樣雖然能拿到 name / age，但是會變成普通變量，沒有響應(yīng)式效果了
const { name, age } = data

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

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

// 不管是 toRef 還是 toRefs，這樣修改是會把 data 里的 name 改掉的
// 就是會改變源對象屬性，這才是響應(yīng)式該有的樣子
name.value = '沐沐華華'
</script>

 

watch

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

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

 

而 Vue3 中監(jiān)聽的寫法就豐富得多了

Vue3 的 watch 是一個函數(shù)，能接收三個參數(shù)，參數(shù)一是監(jiān)聽的屬性，參數(shù)二是接收新值和老值的回調(diào)函數(shù)，參數(shù)三是配置項

 

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

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

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

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

// 監(jiān)聽多個屬性，數(shù)組放多個值，返回的新值和老值也是數(shù)組形式
watch([data.age, data.money], ([newAge, oldAge], [newMoney, oldMoney]) => { ... })

// 第三個參數(shù)是一個對象，為可配置項，有5個可配置屬性
watch(data.children, (newList, oldList) => { ... }, {
    // 這兩個和 Vue2 一樣，沒啥說的
    immediate: true,
    deep: true,
    // 回調(diào)函數(shù)的執(zhí)行時機(jī)，默認(rèn)在組件更新之前調(diào)用。更新后調(diào)用改成post
    flush: 'pre', // 默認(rèn)值是 pre，可改成 post 或 sync
    // 下面兩個是調(diào)試用的
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})
</script>

 

關(guān)于副作用，在 watch 回調(diào)函數(shù)中能接收第三個參數(shù)，為清除副作用的函數(shù)，它的執(zhí)行機(jī)制默認(rèn)在更新之前調(diào)用，比如如下代碼，當(dāng) key 觸發(fā)更新時會先打印 222 再打印 沐華，如果需要在更新之后調(diào)用，可以在 watch 第三個配置項中添加 flush: post，

 

// 回調(diào)函數(shù)接收一個參數(shù)，為清除副作用的函數(shù)
watch(key, (newKey, oldKey, onInvalidate) => {
    console.log('沐華')
    // 獲取DOM默認(rèn)獲取到的是更新前的dom，如果是flush: post，可以獲取到更新后的dom
    console.log('DOM節(jié)點：', dom.innterhtml)
    onInvalidate(() => {
        console.log(2222)
    })
})

 

監(jiān)聽還沒完呢

尤大：嘿嘿~

watchEffect

Vue3 中除了 watch 還增加了一個 watchEffect。區(qū)別是：

• watch 是對傳入的一個或多個值進(jìn)行監(jiān)聽，觸發(fā)時會返回新值和老值，且默認(rèn)第一次不會執(zhí)行
• watchEffect 是傳入一個立即執(zhí)行函數(shù)，所以默認(rèn)第一次就會執(zhí)行，且不需要傳入監(jiān)聽內(nèi)容，會自動收集函數(shù)內(nèi)的數(shù)據(jù)源作為依賴，當(dāng)依賴發(fā)生變化時會重新執(zhí)行函數(shù)(有點像computed的味道)，而且不會返回新值和老值
• 清除副作用和副作用的刷新時機(jī)是一樣的，區(qū)別是 watch 中會作為回調(diào)的第三個參數(shù)傳入，watchEffect 中是回調(diào)函數(shù)的第一個參數(shù)
• 正常情況下組件銷毀/卸載后這兩都會自動停止監(jiān)聽，但也有例，比如異步的方式在 setTimeout 里創(chuàng)建的監(jiān)聽就都需要手動停止監(jiān)聽，停止方式如下

 

// 停止監(jiān)聽
const unwatch = watch('key', callback)
const unwatchEffect = watchEffect(() => {})
// 需要的時候手動停止監(jiān)聽
unwatch()
unwatchEffect()

 

watchEffect 使用：

 

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

// 正常使用
watchEffect(() => {
    // 會自動收集這個函數(shù)使用到的屬性作為依賴，進(jìn)行監(jiān)聽
    // 監(jiān)聽的是 userInfo.name 屬性，不會監(jiān)聽 userInfo
    console.log(userInfo.name)
})

// 有兩個參數(shù)，參數(shù)一是觸發(fā)監(jiān)聽回調(diào)函數(shù)，參數(shù)二是可選配置項
watchEffect(() => {...}, {
    // 這里是可配置項，意思和 watch 是一樣的，不過這只有3個可配置的
    flush: 'pre',
    onTrack (e) { debugger }
    onTrigger (e) { debugger }
})

// 回調(diào)函數(shù)接收一個參數(shù)，為清除副作用的函數(shù)，和 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 獲取狀態(tài)管理的屬性、 獲取 url 上的屬性、條件判斷、類型轉(zhuǎn)換之類的，支持函數(shù)和對象兩種寫法

而 Vue3 中 computed 不再是一個對象，而是一個函數(shù)，用法其實基本差不多，函數(shù)第一個參數(shù)是偵聽器源，用于返回計算的新值，也支持對象寫法，第二個參數(shù)可用于調(diào)試

 

<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 第二個參數(shù)也是一個對象，調(diào)試用的
const hehe = computed(參數(shù)一上面兩種都可， {
    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 中邏輯的抽離復(fù)用一般用 mixins，缺點有三：

• 沒有獨立命名空間，mixins 會和組件內(nèi)部產(chǎn)生命名沖突
• 不去翻代碼不知道引入的 mixins 里面有啥
• 引入多個 mixins 時不知道自己使用的是來自哪一個 mixins 的

Vue3 中邏輯抽離復(fù)用的 hooks 語法，其實就是一個函數(shù)，可以傳參，拿返回值來用。或者可以這樣理解：平時要封裝公用的方法是怎么寫的？Vue3 里就可以怎么寫

 

// 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 如何寫出更優(yōu)雅的代碼，還個需要多寫，多實踐

組件通信

Vue3 組件通信的方式，有如下幾種

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

關(guān)于 Vue 組件通信的使用方式，去年我寫過一篇文章，上面都羅列的很詳細(xì)了，就不搬過來了

Vue3的8種和Vue2的12種組件通信

多個 v-model

Vue2 中每個組件上只能寫一個 v-model，子組件沒有寫 model 的話，默認(rèn)在 props 接收 value 即可，修改就是用 this.$emit('input') 事件

Vue3 中每個組件每個組件上支持寫多個 v-model，沒有了 .sync 和 model 重命名的操作，也不需要了，寫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>

 

狀態(tài)管理

Vuex 會的就不用說了，不會的就直接學(xué) Pinia 吧

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

上手 Vue 新的狀態(tài)管理 Pinia，一篇文章就夠了

路由

Vue2 中的 $route 和 $router 如下，可以自己打印出來看一下

 

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

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

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

 

template

Vue2 中只能有一個根節(jié)點，而 Vue3 中支持多個根節(jié)點，這個大家都知道

其實本質(zhì)上 Vue3 每個組件還是一個根節(jié)點，因為 DOM 樹只能是樹狀結(jié)構(gòu)的，只是 Vue3 在編譯階段新增了判斷，如果當(dāng)前組件不只一個根元素，就添加一個 fragment 組件把這個多根組件的給包起來，相當(dāng)于這個組件還是只有一個根節(jié)點

 

<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 標(biāo)簽了，全都加到全局上去了
// <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>