vue-interview(1/2/3)

1. 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. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

2. Vue****组件data为什么必须是个函数而Vue的根实例则没有此限制？

源码中找答案：src\core\instance\state.js - initData()

函数每次执行都会返回全新data对象实例

测试代码如下

<!DOCTYPE html> 
<html> 
    <head>
        <title>Vue事件处理</title> 
    </head> 
    
    <body>
        <div id="demo"> 
            <h1>vue组件data为什么必须是个函数? </h1> 
            <comp></comp>
            <comp></comp> 
        </div> 
        <script src="../../dist/vue.js">
        
        </script> 
        <script> 
            Vue.component('comp', { 
                template:'<div @click="counter++">{{counter}}</div>', 
                data: {counter: 0} 
            })
            // 创建实例 
            const app = new Vue({ 
                el: '#demo', 
            }); 
        </script> 
    </body> 
</html>

结论

Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

3. 你知道vue中key的作用和工作原理吗？说说你对它的理解。

源码中找答案：src\core\vdom\patch.js - updateChildren()

<!DOCTYPE html> 
<html> 
    <head>
        <title>03-key的作用及原理?</title> 
    </head> 
    <body>
        <div id="demo"> 
            <p v-for="item in items" :key="item">{{item}}</p> 
        </div> 
        
        <script src="../../dist/vue.js"></script> 
        
        <script>
            // 创建实例 
            const app = new Vue({ 
                el: '#demo', 
                data: { items: ['a', 'b', 'c', 'd', 'e'] }, 
                mounted () { 
                    setTimeout(() => { this.items.splice(2, 0, 'f') }, 2000); 
                }, }); 
        </script> 
    </body> 
</html>

结论

\1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两

个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操

作量，提高性能。

\2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug

\3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分

它们，否则vue只会替换其内部属性而不会触发过渡效果。

posted @ 2021-03-31 07:55  zhangzchun  阅读(86)  评论(0)    收藏  举报