vue3 provide與inject的使用小技巧分享

更新時(shí)間：2022年04月18日 16:14:40 作者：原諒我不夠?yàn)⒚?

這篇文章主要介紹了vue3 provide與inject的使用小技巧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3 provide與inject使用技巧

主要使用來溝通上下文，比如父——子——子1——子2，父組件和子2組件間的通信，不使用這方法也能解決的方式還有兩種

props $emit 一層一層的傳弊端：寫著太麻煩
vuex 用多了性能就不太行了

進(jìn)入正題

官方文檔上只提供了傳遞值的方式，沒有提供子組件去跨級(jí)改父級(jí)組件的值，但是可以換一種寫法就可以了，直接代碼

代碼結(jié)構(gòu)：父組件——child組件——son組件

父組件

<template>
? <div class="text">盒子 {{state.name}}</div>
? <div class="box">
? ?<Child/>
? </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, provide } from 'vue'
import Child from './components/child.vue'
export default defineComponent({
? components:{
? ? Child
? },
? setup() {
? ? const state: any = reactive({
? ? ? name: 'zlz',
? ? ? age: 24
? ? })
? ? const update = (key: string, val: any): void => {
? ? ? state[key] = val
? ? }
? ? provide('ref2', {
? ? ? val: state, ?// val需要傳遞的值
? ? ? update // 更新傳遞的值的方法
? ? })
? ? return {
? ? ? state
? ? }
? }
})
</script>

ps: 當(dāng)然也可以換一種寫法這一種寫法要簡(jiǎn)便一點(diǎn) 但是語義化更弱

const state: any = reactive({
? name: 'zlz',
? age: 24,
? update // 更新state的方法
})
provide('ref2', state)

child組件

<template>
? <div class="box">
? ? <div class="box">child組件</div>
? ? <Son/>
? </div>
</template>

<script>
import { defineComponent, reactive, toRaw } from 'vue'
import Son from './son.vue'
export default defineComponent({
? components:{
? ? Son
? },
? setup() {
? }
})
</script>

son組件

<template>
? <div class="box">
? ? son組件 {{ref2.val.age}}
? </div>
? <button @click="handleClick">
? ? 子組件點(diǎn)擊
? </button>
</template>

<script>
import { inject } from 'vue'
export default {
? setup() {
? ? const ref2 = inject('ref2')
? ? const handleClick = () => {
? ? ? const key = 'age'
? ? ? ref2.update(key, 111) // 調(diào)用傳遞下來的方法去更新父組件的值
? ? }
? ? return {
? ? ? ref2,
? ? ? handleClick
? ? }
? }
}
</script>

vue3的一些實(shí)用技巧

v-for 和 v-if 不要一起使用（Vue2）

此優(yōu)化技巧僅限于Vue2，Vue3 中對(duì) v-for 和 v-if 的優(yōu)先級(jí)做了調(diào)整，

永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上

原因是 v-for 的優(yōu)先級(jí)高于 v-if，所以當(dāng)它們使用再同一個(gè)標(biāo)簽上是，每一個(gè)渲染都會(huì)先循環(huán)再進(jìn)行條件判斷

注意： Vue3 中 v-if 優(yōu)先級(jí)高于 v-for，所以當(dāng) v-for 和 v-if 一起使用時(shí)效果類似于 Vue2 中把 v-if 上提的效果

例如下面這段代碼在 Vue2 中是不被推薦的，Vue 也會(huì)給出對(duì)應(yīng)的警告

<ul>
? <li v-for="user in users" v-if="user.active">
? ? {{ user.name }}
? </li>
</ul>

我們應(yīng)該盡量將 v-if 移動(dòng)到上級(jí) 或者使用計(jì)算屬性來處理數(shù)據(jù)

<ul v-if="active">
? <li v-for="user in users">
? ? {{ user.name }}
? </li>
</ul>

如果你不想讓循環(huán)的內(nèi)容多出一個(gè)無需有的上級(jí)容器，那么你可以選擇使用 template 來作為其父元素，template 不會(huì)被瀏覽器渲染為 DOM 節(jié)點(diǎn)

如果我想要判斷遍歷對(duì)象里面每一項(xiàng)的內(nèi)容來選擇渲染的數(shù)據(jù)的話，可以使用 computed 來對(duì)遍歷對(duì)象進(jìn)行過濾

// js
let usersActive = computed(()=>users.filter(user => user.active))
// template
<ul>
? ? <li v-for="user in usersActive">
? ? ? {{ user.name }}
? ? </li>
</ul>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: