想用Vuejs突破20K必备的热门面试题(一)v-if

1,615 阅读3分钟

村长的话

同学们好,我是Young村长。关于Vue框架部分会涉及一些高频面试题,大多数看似非常初级,在官方文档就能查看的纯记忆性质的面试题,比如:

  • vue组件之间如何通信?
  • vue生命周期有哪些?

这类面试题在文档中就能找到答案,网络上面找到的答案也是千篇一律。大家只要使用过vue并且稍加记忆即可流畅作答,但如果你也这样回答,就算自己真的比其他竞争者更有实力,也很难脱颖而出,更别提获得高薪offer了。

事实真是这样吗?

答案当然是否定的。本系列文章提炼于全栈课程的训练营,我们的问题并不多,但是旨在将回答问题的方式、思路和层次提升一个层级。如果你真的学会了这些方法,在绝大多数情况下都会有举一反三的效果,可以说拿下offer如探囊取物一般简单!

下面开会

第一题:v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?

源码中找答案compiler/codegen/index.js

<p v-for="item in items" v-if="condition">

做个测试如下

<!DOCTYPE html>
<html>

<head>
    <title>Vue事件处理</title>
</head>

<body>
    <div id="demo">
        <h1>v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?</h1>
        <!-- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> -->
        <template v-if="isFolder">
            <p v-for="child in children">{{child.title}}</p>
        </template>
    </div>
    <script src="../../dist/vue.js"></script>
    <script>
        // 创建实例
        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>

两者同级时,渲染函数如下:

(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?")]),_v(" "),
_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()})],2)}
})

_l包含了isFolder的条件判断

两者不同级时,渲染函数如下

(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?")]),_v(" "),
(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
})

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

结论:

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

下篇文章我们将继续来讲解"data的限制",关注小编不迷路,持续为你输送前端爆文~

动动小手点个赞,与小编一起勇闯前端圈儿,欢迎留言评论,一起讨论哟~~