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

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

詳解vue3中渲染函數(shù)的非兼容變更

瀏覽:5日期:2022-10-02 18:02:26
渲染函數(shù)API變更

此更改不會(huì)影響到<template>用戶

h現(xiàn)在全局導(dǎo)入,而非作為參數(shù)傳遞給渲染函數(shù) 渲染函數(shù)參數(shù)更改為在有狀態(tài)組件和函數(shù)組件之間更加一致 vnode現(xiàn)在又一個(gè)扁平的prop結(jié)構(gòu)Render函數(shù)參數(shù)

// 2.0 渲染函數(shù)export default { render(h) { return h(’div’) }}// 3.x語(yǔ)法export default { render() { return h(’div’) }}渲染函數(shù)簽名更改

// 2.xexport default { render(h) { return h(’div’) }}// 3.ximport { h, reactive } from ’vue’export default { setup(prop, {slots, attrs, emit}) { const state = reactive({ count: 0 }) function increment() { state.count++ } // 返回render函數(shù) return () => h( ’div’, { onClick: increment }, state.count ) }}VNode Props 格式化

// 2.x{ class: [’button’, ’is-outlined’], style: {color: ’#fffff’}, attr: {id: ’submit’}, domProps: {innerHTML: ’’}, on: {click: submitForm}, key: ’submit-button’}// 3.x VNode的結(jié)構(gòu)是扁平的{ class: [’button’, ’is-outlined’], style: { color: ’#34495E’ }, id: ’submit’, innerHTML: ’’, onClick: submitForm, key: ’submit-button’}slot統(tǒng)一

更改了普通slot和作用域slot

this.$slots現(xiàn)在將slots作為函數(shù)公開(kāi) 移除this.$scopedSlots

// 2.xh(LayoutComponent, [ h(’div’, {slot: ’header’}, this.header), h(’div’, {slot: ’header’}, this.header)])// 作用域slot:// 3.xh(LayoutComponent, {}, { header: () => h(’div’, this.header), content: () => h(’div’, this.content)})// 需要以編程方式引入作用域slot時(shí),他們現(xiàn)在被統(tǒng)一在了$slots選項(xiàng)中// 2.x的作用域slotthis.$scopedSlots.header// 3.x的寫(xiě)法this.$slots.header移除$listeners

$listeners對(duì)象在vue3中已經(jīng)移除,現(xiàn)在事件監(jiān)聽(tīng)器是$attrs的一部分

在vue2中,可以使用this.attrs和this.attrs和this.listeners分別訪問(wèn)傳遞給組件的attribute和時(shí)間監(jiān)聽(tīng)器,結(jié)合inheritAttrs: false,開(kāi)發(fā)者可以將這些attribute和監(jiān)聽(tīng)器應(yīng)用到其他元素,而不是根元素

<template><label> <input type='text' v-bind='$attrs' v-on='$listeners'></label></template><script> export default { inheritAttrs: false }</script>

在vue的虛擬DOM中,事件監(jiān)聽(tīng)器現(xiàn)在只是以on為前綴的attribute,這樣就成了attrs對(duì)象的一部分,這樣attrs對(duì)象的一部分,這樣listeners就被移除了

<template> <label> <input type='text' v-bind='$attrs' /> </label></template><script>export default { inheritAttrs: false}// 如果這個(gè)組件接收一個(gè) id attribute 和一個(gè) v-on:close 監(jiān)聽(tīng)器,那么 $attrs 對(duì)象現(xiàn)在將如下所示{ id: ’my-input’, onClose: () => console.log(’close Event Triggered’)}</script>$attrs現(xiàn)在包括class和style

現(xiàn)在的$attr包含所有的attribute,包括class和style

在2.x中,虛擬dom會(huì)對(duì)class和style進(jìn)行特殊處理,所以他們不包括在$attr中在使用inheritAttr: false的時(shí)候會(huì)產(chǎn)生副作用

$attrs 中的 attribute 不再自動(dòng)添加到根元素中,而是由開(kāi)發(fā)者決定在哪添加。 但是 class 和 style 不屬于 $attrs,仍然會(huì)應(yīng)用到組件的根元素:

<template> <label> <input type='text' v-bind='$attrs' /> </label></template><script>export default { inheritAttrs: false}</script><!-- 寫(xiě)入 --><my-component class='my-class'></my-component><!-- vue2 將生成 --><label class='my-class'> <input type='text' /></label><!-- vue3 將生成 --><label> <input type='text' /></label>

以上就是詳解vue3中渲染函數(shù)的非兼容變更的詳細(xì)內(nèi)容,更多關(guān)于vue 渲染函數(shù)非兼容變更的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 合同书格式和范文_合同书样本模板_电子版合同,找范文吧 | 选矿设备,选矿生产线,选矿工艺,选矿技术-昆明昆重矿山机械 | 船用烟火信号弹-CCS防汛救生圈-船用救生抛绳器(海威救生设备) | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | 冷却塔风机厂家_静音冷却塔风机_冷却塔电机维修更换维修-广东特菱节能空调设备有限公司 | 工业淬火油烟净化器,北京油烟净化器厂家,热处理油烟净化器-北京众鑫百科 | 专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 课件导航网_ppt课件_课件模板_课件下载_最新课件资源分享发布平台 | 温州富欧金属封头-不锈钢封头厂家 | 不锈钢丸厂家,铝丸,铸钢丸-淄博智源铸造材料有限公司 | 双舌接地线-PC68数字式高阻计-ZC36|苏海百科| 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 衬四氟_衬氟储罐_四氟储罐-无锡市氟瑞特防腐科技有限公司 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 下水道疏通_管道疏通_马桶疏通_附近疏通电话- 立刻通 | 超声波_清洗机_超声波清洗机专业生产厂家-深圳市好顺超声设备有限公司 | 充气膜专家-气膜馆-PTFE膜结构-ETFE膜结构-商业街膜结构-奥克金鼎 | 郑州外墙清洗_郑州玻璃幕墙清洗_郑州开荒保洁-河南三恒清洗服务有限公司 | 悬浮拼装地板_幼儿园_篮球场_悬浮拼接地板-山东悬浮拼装地板厂家 | 玉米加工设备,玉米深加工机械,玉米糁加工设备.玉米脱皮制糁机 华豫万通粮机 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | 密集架-手摇-智能-移动-价格_内蒙古档案密集架生产厂家 | 包塑丝_高铁绑丝_地暖绑丝_涂塑丝_塑料皮铁丝_河北创筹金属丝网制品有限公司 | 球形钽粉_球形钨粉_纳米粉末_难熔金属粉末-广东银纳官网 | 废气处理_废气处理设备_工业废气处理_江苏龙泰环保设备制造有限公司 | 品牌策划-品牌设计-济南之式传媒广告有限公司官网-提供品牌整合丨影视创意丨公关活动丨数字营销丨自媒体运营丨数字营销 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 | nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 自动检重秤-动态称重机-重量分选秤-苏州金钻称重设备系统开发有限公司 | 天坛家具官网| 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 高效节能电机_伺服主轴电机_铜转子电机_交流感应伺服电机_图片_型号_江苏智马科技有限公司 | 吊篮式|移动式冷热冲击试验箱-二槽冷热冲击试验箱-广东科宝 | 成都中天自动化控制技术有限公司 | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 |