v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？...

最新推荐文章于 2024-05-28 09:35:57 发布

lvhanghmm

最新推荐文章于 2024-05-28 09:35:57 发布

阅读量193

点赞数

文章标签： vue js java 面试 mysql

本文链接：https://blog.csdn.net/Lv__Hang/article/details/119558039

版权

v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件处理</title>
</head>
<body>

    <div id="demo">
        <h1> v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？</h1>

<!--        同级情况 会先循环 再进行判断 -->
        <p v-for="child in children" v-if="isFolder">{{child.title}}</p>

<!--        不同级情况 会先判断 if 条件 再进行 for 循环 -->
        <template v-if="isFolder">
            <p v-for="child in children">
                {{child.title}}
            </p>
        </template>
    </div>
    <script src="./js/vue.js"></script>

    <script>
        /***
         v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？
         源码中找答案
         compiler/codegen/index.js
         做个测试如下
         **/
        // 创建一个实例！#
        const app = new Vue({
            el: '#demo',
            data () {
                return {
                    children: [
                        {title: 'foo'},
                        {title: 'bar'}
                    ]
                }
            },
            computed: {
                isFolder () {
                    return this.children && this.children.length > 0
                }
            }
        });
        console.log(app.$options.render);
    </script>
</body>
</html>

当 v-for 和 v-if 同级出现的时候优先级是？！render 渲染函数！

ƒ anonymous(
) {
with(this){
return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v(" v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？")]),_v(" "),_l((children),function(child){return (isFolder)?_c('p',[_v(_s(chil…

先循环，再判断！

当 v-for 和 v-if 不同级出现的时候优先级是？！先执行判断语句

ƒ anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v(" v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？")]),_v(" "),(isFolder)?_l((children),function(child){return _c('p',[_v("\n    …

先判断了条件再看是否执行_l

结论：

显然v-for优先于v-if被解析(把你是怎么知道的告诉面试官)
如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环
如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

lvhanghmm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？...

v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue事件处理</title></head><bod...
复制链接

扫一扫