vue.js经典面试问题_JS经典试题资源-CSDN文库

需积分: 5 55 浏览量 2023-07-06 18:30:16 上传评论收藏 94KB PDF 举报

资源推荐

资源详情

资源评论

!

v-if和v-for哪个优先级更⾼？

分析：

此题考查常识，⽂档中曾有详细说明v2|v3；也是⼀个很好的实践题⽬，项⽬中经常会遇到，能够看出⾯试者应⽤

能⼒。

!

思路分析：总分总模式

1. 先给出结论

2. 为什么是这样的

3. 它们能放⼀起吗

4. 如果不能，那应该怎样

5. 总结

回答范例：

1. 在 Vue 2 中， v-for 优先于 v-if 被解析；但在 Vue 3 中，则完全相反， v-if 的优先级⾼于 v-for 。

2. 我曾经做过实验，把它们放在⼀起，输出的渲染函数中可以看出会先执⾏循环再判断条件

3. 实践中也不应该把它们放⼀起，因为哪怕我们只渲染列表中⼀⼩部分元素，也得在每次重渲染的时候遍历整

个列表。

4. 通常有两种情况下导致我们这样做：

为了过滤列表中的项⽬ (⽐如 v-for="user in users" v-if="user.isActive" )。此时定义⼀个计

算属性 (⽐如 activeUsers )，让其返回过滤后的列表即可。

为了避免渲染本应该被隐藏的列表 (⽐如 v-for="user in users" v-if="shouldShowUsers" )。此

时把 v-if 移动⾄容器元素上 (⽐如 ul 、 ol )即可。

5. ⽂档中明确指出永远不要把 v-if 和 v-for 同时⽤在同⼀个元素上，显然这是⼀个重要的注意事项。

6. 看过源码⾥⾯关于代码⽣成的部分，

知其所以然：

在 Vue 2 中做个测试，test.html

两者同级时，渲染函数如下：

ƒ anonymous(

) {

with(this){return _c('div',{attrs:{"id":"app"}},_l((items),function(item){return

(item.isActive)?_c('div',{key:item.id},[_v(" ! ! "+_s(item.name)+" !

")]):_e()}),0)}

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

小白的杂货铺

粉丝: 253
资源: 324

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip