宏泰机械网站建设,wordpress小小工具,临沂建设公司网站,网站建设运营期末考试文章底部有个人公众号#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享#xff1f; 踩过的坑没必要让别人在再踩#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官#xff1a;v-if和v-for的优先级是什… 文章底部有个人公众号热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享 踩过的坑没必要让别人在再踩自己复盘也能加深记忆。利己利人、所谓双赢。 面试官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源码
源码位置\vue-dev\src\compiler\codegen\index.js
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高
三、注意事项
1、永远不要把 v-if 和 v-for 同时用在同一个元素上带来性能方面的浪费每次渲染都会先循环再进行条件判断 2、如果避免出现这种情况则在外层嵌套template页面渲染不生成dom节点在这一层进行v-if判断然后在内部进行v-for循环
template v-ifisShowp v-foritem in items
/template3、如果条件出现在循环内部可通过计算属性computed提前过滤掉那些不需要显示的项
computed: {items: function() {return this.list.filter(function (item) {return item.isShow})}
}
