成品网站1688入口网页版,帝国cms收费吗,wordpress less,数据库网站制作#x1f308;个人主页#xff1a;前端青山 #x1f525;系列专栏#xff1a;Vue篇 #x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue中v-if与v-for的优先级? 目录
v-if和v-for的优先级是什么#xff1f;
一、作用
二、优先级…
个人主页前端青山 系列专栏Vue篇 人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue中v-if与v-for的优先级? 目录
v-if和v-for的优先级是什么
一、作用
二、优先级
示例
注意事项
v-if 与 v-for 同时存在于一个元素上会发生什么
vue3中
vue2中
当我们在使用Vue.js开发应用程序时经常会遇到需要根据条件显示或隐藏元素的情况。Vue.js提供了v-if和v-for指令来实现这一功能。然而当这两个指令同时存在于同一个元素上时我们需要了解它们的优先级以便正确地控制元素的显示与隐藏。
在Vue.js中v-for指令用于循环渲染元素列表而v-if指令用于条件性地渲染元素。当这两个指令同时存在于一个元素上时Vue.js将按照一定的优先级来解析它们。
v-if和v-for的优先级是什么 一、作用
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法其中 items 是源数据数组或者对象而 item 则是被迭代的数组元素的别名
在 v-for 的时候建议设置key值并且保证每个key值是独一无二的这便于diff算法进行优化
两者在用法上
Modal v-ifisShow /
li v-foritem in items :keyitem.id{{ item.label }}
/li
二、优先级
v-if与v-for都是vue模板系统中的指令
在vue模板编译的时候会将指令系统转化成可执行的render函数
示例
编写一个p标签同时使用v-if与 v-for
div idappp v-ifisShow v-foritem in items{{ item.title }}/p
/div
创建vue实例存放isShow与items数据
const app new Vue({el: #app,data() {return {items: [{ title: foo },{ title: baz }]}},computed: {isShow() {return this.items this.items.length 0}}
})
模板指令的代码都会生成在render函数中通过app.$options.render就能得到渲染函数
ƒ anonymous() {with (this) { return _c(div, { attrs: { id: app } }, _l((items), function (item) { return (isShow) ? _c(p, [_v(\n _s(item.title) \n)]) : _e() }), 0) }
}
_l是vue的列表渲染函数函数内部都会进行一次if判断
初步得到结论v-for优先级是比v-if高
再将v-for与v-if置于不同标签
div idapptemplate v-ifisShowp v-foritem in items{{item.title}}/p/template
/div
再输出下render函数
ƒ anonymous() {with(this){return _c(div,{attrs:{id:app}},[(isShow)?[_v(\n),_l((items),function(item){return _c(p,[_v(_s(item.title))])})]:_e()],2)}
}
这时候我们可以看到v-for与v-if作用在不同标签时候是先进行判断再进行列表的渲染
我们再在查看下vue源码
export function genElement (el: ASTElement, state: CodegenState): string {if (el.parent) {el.pre el.pre || el.parent.pre}if (el.staticRoot !el.staticProcessed) {return genStatic(el, state)} else if (el.once !el.onceProcessed) {return genOnce(el, state)} else if (el.for !el.forProcessed) {return genFor(el, state)} else if (el.if !el.ifProcessed) {return genIf(el, state)} else if (el.tag template !el.slotTarget !state.pre) {return genChildren(el, state) || void 0} else if (el.tag slot) {return genSlot(el, state)} else {// component or element...
}
在进行if判断的时候v-for是比v-if先进行判断
最终结论v-for优先级比v-if高
注意事项 永远不要把 v-if 和 v-for 同时用在同一个元素上带来性能方面的浪费每次渲染都会先循环再进行条件判断 如果避免出现这种情况则在外层嵌套template页面渲染不生成dom节点在这一层进行v-if判断然后在内部进行v-for循环
template v-ifisShowp v-foritem in items
/template 3.如果条件出现在循环内部可通过计算属性computed提前过滤掉那些不需要显示的项
computed: {items: function() {return this.list.filter(function (item) {return item.isShow})}
}
v-if 与 v-for 同时存在于一个元素上会发生什么
vue3中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue3 v-for v-if优先级/title
/head
bodydiv idapp!-- 审查元素查看优先级vue3中v-if的优先级高于v-for --ulli v-ifflag v-foritem in list :keyitem{{ item }}/li/ul/div
/body
script src../lib/vue.global.js/script
script
Vue.createApp({data () {return {list: [a, b, c, d],flag: false}}}).mount(#app)
/script
/html
vue2中
!DOCTYPE html
html langen
head
meta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue2 v-for v-if优先级/title
/head
body
div idapp!-- 审查元素查看优先级vue2中v-for的优先级高于v-if --ulli v-ifflag v-foritem in list :keyitem{{ item }}/li/ul/div
/body
script src../lib/vue.js/script
script
new Vue({data: {list: [a, b, c, d],flag: false}}).$mount(#app)
/script
/html 通过审查元素得知 vue3中v-if的优先级高于v-for vue2中v-for的优先级高于v-if 首先Vue.js会先解析v-for指令生成循环的虚拟DOM节点。然后在每个循环节点上Vue.js会再次解析v-if指令根据条件判断是否显示该节点。换句话说v-for的循环优先于v-if的条件判断。
这意味着当v-if和v-for同时存在于同一个元素上时元素会先被循环渲染出来然后在每次循环内部进行条件判断决定是否显示该元素。
这种优先级的设计是为了避免不必要的循环计算提高性能。如果v-if的条件判断放在v-for循环之外那么每次循环都会进行一次条件判断这可能会影响性能。
因此在使用v-if和v-for时我们应该根据实际需求合理地安排它们的位置。如果我们希望根据条件来动态显示或隐藏循环渲染的元素应该将v-if放在v-for的内部如果我们只是希望在满足某个条件时才进行循环渲染可以将v-if放在v-for的外部。
总结起来v-for的优先级高于v-if因此在同一个元素上使用这两个指令时应根据实际需求合理安排它们的位置以确保程序的正确运行和更好的性能。
