电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

在Vue中使用HOC模式的實(shí)現(xiàn)

瀏覽:113日期:2022-12-03 17:23:32

前言

HOC是React常用的一種模式,但HOC只能是在React才能玩嗎?先來看看React官方文檔是怎么介紹HOC的:

高階組件(HOC)是React中用于復(fù)用組件邏輯的一種高級技巧。HOC自身不是ReactAPI的一部分,它是一種基于React的組合特性而形成的設(shè)計(jì)模式。

HOC它是一個模式,是一種思想,并不是只能在React中才能用。所以結(jié)合Vue的特性,一樣能在Vue中玩HOC。

HOC

HOC要解決的問題

并不是說哪種技術(shù)新穎,就得使用哪一種。得看這種技術(shù)能夠解決哪些痛點(diǎn)。

HOC主要解決的是可復(fù)用性的問題。在Vue中,這種問題一般是用Mixin解決的。Mixin是一種通過擴(kuò)展收集功能的方式,它本質(zhì)上是將一個對象的屬性拷貝到另一個對象上去。

最初React也是使用Mixin的,但是后面發(fā)現(xiàn)Mixin在React中并不是一種好的模式,它有以下的缺點(diǎn):

mixin與組件之間容易導(dǎo)致命名沖突 mixin是侵入式的,改變了原組件,復(fù)雜性大大提高。

所以React就慢慢的脫離了mixin,從而推薦使用HOC。并不是mixin不優(yōu)秀,只是mixin不適合React。

HOC是什么

HOC全稱:high-order component--也就是高階組件。具體而言,高階組件是參數(shù)為組件,返回值為新組件的函數(shù)。

而在React和Vue中組件就是函數(shù),所以的高階組件其實(shí)就是高階函數(shù),也就是返回一個函數(shù)的函數(shù)。

來看看HOC在React的用法:

function withComponent(WrappedComponent) { return class extends Component { componentDidMount () { console.log(’已經(jīng)掛載完成’) } render() { return <WrappedComponent {...props} />; } }}

withComponent就是一個高階組件,它有以下特點(diǎn):

HOC是一個純函數(shù),且不應(yīng)該修改原組件 HOC不關(guān)心傳遞的props是什么,并且WrappedComponent不關(guān)心數(shù)據(jù)來源 HOC接收到的props應(yīng)該透傳給WrapperComponent

在Vue中使用HOC

怎么樣才能將Vue上使用HOC的模式呢?

我們一般書寫的Vue組件是這樣的:

<template> <div> <p>{{title}}</p> <button @click='changeTitle'></button> </div></template><script>export default { name: ’ChildComponent’, props: [’title’], methods: { changeTitle () { this.$emit(’changeTitle’); } }}</script>

而withComponet函數(shù)的功能是在每次掛載完成后都打印一句:已經(jīng)掛載完成。

既然HOC是替代mixin的,所以我們先用mixin書寫一遍:

export default { mounted () { console.log(’已經(jīng)掛載完成’) }}

然后導(dǎo)入到ChildComponent中

import withComponent from ’./withComponent’;export default { ... mixins: [’withComponet’],}

對于這個組件,我們在父組件中是這樣調(diào)用的

<child-component :title=’title’ @changeTitle=’changeTitle’></child-component><script>import ChildComponent from ’./childComponent.vue’;export default { ... components: {ChildComponent}}</script>

大家有沒有發(fā)現(xiàn),當(dāng)我們導(dǎo)入一個Vue組件時,其實(shí)是導(dǎo)入一個對象。

export default {}

至于說組件是函數(shù),其實(shí)是經(jīng)過處理之后的結(jié)果。所以Vue中的高階組件也可以是:接收一個純對象,返回一個純對象。

所以改為HOC模式,是這樣的:

export default function withComponent (WrapperComponent) { return { mounted () { console.log(’已經(jīng)掛載完成’) }, props: WrappedComponent.props, render (h) { return h(WrapperComponent, {on: this.$listeners,attrs: this.$attrs,props: this.$props }) } }}

注意{on: this.$listeners,attr: this.$attrs, props: this.props}這一句就是透傳props的原理,等價(jià)于React中的<WrappedComponent {...props} />;

this.$props是指已經(jīng)被聲明的props屬性,this.$attrs是指沒被聲明的props屬性。這一定要兩個一起透傳,缺少哪一個,props都不完整。

為了通用性,這里使用了render函數(shù)來構(gòu)建,這是因?yàn)閠emplate只有在完整版的Vue中才能使用。

這樣似乎還不錯,但是還有一個重要的問題,在Vue組件中是可以使用插槽的。

比如:

<template> <div> <p>{{title}}</p> <button @click='changeTitle'></button> <slot></slot> </div></template>

在父組件中

<child-component :title=’title’ @changeTitle=’changeTitle’>Hello, HOC</child-component>

可以用this.$solts訪問到被插槽分發(fā)的內(nèi)容。每個具名插槽都有其相應(yīng)的property,例如v-slot:foo中的內(nèi)容將會在this.$slots.foo中被找到。而default property包括了所有沒有被包含在具名插槽中的節(jié)點(diǎn),或v-slot:default的內(nèi)容。

所以在使用渲染函數(shù)書寫一個組件時,訪問this.$slots最有幫助的。

先將this.$slots轉(zhuǎn)化為數(shù)組,因?yàn)殇秩竞瘮?shù)的第三個參數(shù)是子節(jié)點(diǎn),是一個數(shù)組

export default function withComponent (WrapperComponent) { return { mounted () { console.log(’已經(jīng)掛載完成’) }, props: WrappedComponent.props, render (h) { const keys = Object.keys(this.$slots); const slotList = keys.reduce((arr, key) => arr.concat(this.$slots[key]), []); return h(WrapperComponent, {on: this.$listeners,attrs: this.$attrs,props: this.$props }, slotList) } }}

總算是有模有樣了,但這還沒結(jié)束,你會發(fā)現(xiàn)使不使用具名插槽都一樣,最后都是按默認(rèn)插槽來處理的。

有點(diǎn)納悶,去看看Vue源碼中是怎么具名插槽的。在src/core/instance/render.js文件中找到了initRender函數(shù),在初始化render函數(shù)時

const options = vm.$optionsconst parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent treeconst renderContext = parentVnode && parentVnode.contextvm.$slots = resolveSlots(options._renderChildren, renderContext)

這一段代碼是Vue解析并處理slot的。將vm.$options._parentVnode賦值為vm.$vnode,也就是$vnode就是父組件的vnode。如果父組件存在,定義renderContext = vm.$vnode.context。renderContext就是父組件要渲染的實(shí)例。 然后把renderContext和$options._renderChildren作為參數(shù)傳進(jìn)resolveSlots()函數(shù)中。

接下里看看resolveSlots()函數(shù),在src/core/instance/render-helper/resolve-slots.js文件中

export function resolveSlots ( children: ?Array<VNode>, context: ?Component): { [key: string]: Array<VNode> } { if (!children || !children.length) { return {} } const slots = {} for (let i = 0, l = children.length; i < l; i++) { const child = children[i] const data = child.data // remove slot attribute if the node is resolved as a Vue slot node if (data && data.attrs && data.attrs.slot) { delete data.attrs.slot } // named slots should only be respected if the vnode was rendered in the // same context. if ((child.context === context || child.fnContext === context) && data && data.slot != null ) { const name = data.slot const slot = (slots[name] || (slots[name] = [])) if (child.tag === ’template’) { slot.push.apply(slot, child.children || []) } else { slot.push(child) } } else { (slots.default || (slots.default = [])).push(child) } } // ignore slots that contains only whitespace for (const name in slots) { if (slots[name].every(isWhitespace)) { delete slots[name] } } return slots}

重點(diǎn)來看里面的一段if語句

// named slots should only be respected if the vnode was rendered in the// same context.if ((child.context === context || child.fnContext === context) && data && data.slot != null) { const name = data.slot const slot = (slots[name] || (slots[name] = [])) if (child.tag === ’template’) { slot.push.apply(slot, child.children || []) } else { slot.push(child) }} else { (slots.default || (slots.default = [])).push(child)}

只有當(dāng)if ((child.context === context || child.fnContext === context) && data && data.slot != null ) 為真時,才處理為具名插槽,否則不管具名不具名,都當(dāng)成默認(rèn)插槽處理

else { (slots.default || (slots.default = [])).push(child)}

那為什么HOC上的if條件是不成立的呢?

這是因?yàn)橛捎贖OC的介入,在原本的父組件與子組件之間插入了一個組件--也就是HOC,這導(dǎo)致了子組件中訪問的this.$vode已經(jīng)不是原本的父組件的vnode了,而是HOC中的vnode,所以這時的this.$vnode.context引用的是高階組件,但是我們卻將slot透傳了,slot中的VNode的context引用的還是原來的父組件實(shí)例,所以就導(dǎo)致不成立。

從而都被處理為默認(rèn)插槽。

解決方法也很簡單,只需手動的將slot中的vnode的context指向?yàn)镠OC實(shí)例即可。注意當(dāng)前實(shí)例 _self 屬性訪問當(dāng)前實(shí)例本身,而不是直接使用 this,因?yàn)?this 是一個代理對象。

export default function withComponent (WrapperComponent) { return { mounted () { console.log(’已經(jīng)掛載完成’) }, props: WrappedComponent.props, render (h) { const keys = Object.keys(this.$slots); const slotList = keys.reduce((arr, key) => arr.concat(this.$slots[key]), []).map(vnode => {vnode.context = this._selfreturn vnode }); return h(WrapperComponent, {on: this.$listeners,attrs: this.$attrs,props: this.$props }, slotList) } }}

而且scopeSlot與slot的處理方式是不同的,所以將scopeSlot一起透傳

export default function withComponent (WrapperComponent) { return { mounted () { console.log(’已經(jīng)掛載完成’) }, props: WrappedComponent.props, render (h) { const keys = Object.keys(this.$slots); const slotList = keys.reduce((arr, key) => arr.concat(this.$slots[key]), []).map(vnode => {vnode.context = this._selfreturn vnode }); return h(WrapperComponent, {on: this.$listeners,attrs: this.$attrs,props: this.$props,scopedSlots: this.$scopedSlots }, slotList) } }}

這樣就行了。

結(jié)尾

更多文章請移步樓主github,如果喜歡請點(diǎn)一下star,對作者也是一種鼓勵。

到此這篇關(guān)于在Vue中使用HOC模式的文章就介紹到這了,更多相關(guān)Vue使用HOC模式內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 磁力反应釜,高压釜,实验室反应釜,高温高压反应釜-威海自控反应釜有限公司 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 厂房出租_厂房出售_产业园区招商_工业地产&nbsp;-&nbsp;中工招商网 | 山东商品混凝土搅拌楼-环保型搅拌站-拌合站-分体仓-搅拌机厂家-天宇 | 山东商品混凝土搅拌楼-环保型搅拌站-拌合站-分体仓-搅拌机厂家-天宇 | 铝合金重力铸造_铝合金翻砂铸造_铝铸件厂家-东莞市铝得旺五金制品有限公司 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 橡胶接头_橡胶软接头_可曲挠橡胶接头-巩义市创伟机械制造有限公司 | 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 长沙网站建设制作「网站优化推广」-网页设计公司-速马科技官网 | 液压油缸-液压缸厂家价格,液压站系统-山东国立液压制造有限公司 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 亿诺千企网-企业核心产品贸易| 硫化罐-电加热蒸汽硫化罐生产厂家-山东鑫泰鑫智能装备有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 博医通医疗器械互联网供应链服务平台_博医通 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 电动葫芦|防爆钢丝绳电动葫芦|手拉葫芦-保定大力起重葫芦有限公司 | 质构仪_鱼糜弹性仪-上海腾拔仪器科技有限公司 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 分轨 | 上传文件,即刻分离人声和伴奏 | 证券新闻,热播美式保罗1984第二部_腾讯1080p-仁爱影院 | 红立方品牌应急包/急救包加盟,小成本好项目代理_应急/消防/户外用品加盟_应急好项目加盟_新奇特项目招商 - 中红方宁(北京) 供应链有限公司 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 减速机三参数组合探头|TSM803|壁挂式氧化锆分析仪探头-安徽鹏宸电气有限公司 | SDI车窗夹力测试仪-KEMKRAFT方向盘测试仪-上海爱泽工业设备有限公司 | 木材烘干机,木炭烘干机,纸管/佛香烘干设备-河南蓝天机械制造有限公司 | 永嘉县奥阳陶瓷阀门有限公司| 暖气片十大品牌厂家_铜铝复合暖气片厂家_暖气片什么牌子好_欣鑫达散热器 | 潜水搅拌机-双曲面搅拌机-潜水推进器|奥伯尔环保 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 湖南长沙商标注册专利申请,长沙公司注册代理记账首选美创! | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 细胞染色-流式双标-试剂盒免费代做-上海研谨生物科技有限公司 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 高压绝缘垫-红色配电房绝缘垫-绿色高压绝缘地毯-上海苏海电气 | 微水泥_硅藻泥_艺术涂料_艺术漆_艺术漆加盟-青岛泥之韵环保壁材 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 空冷器|空气冷却器|空水冷却器-无锡赛迪森机械有限公司[官网] |