vue data为什么是函数_2020Web前端面试题：Vue面试题如何做到深入浅出

2020Web前端面试题,前端开发面试题

关于Vue框架部分会涉及一些高频面试题，大多数看似非常初级，在官方文档就能查看的纯记忆性质的面试题，比如:

- vue组件之间如何通信?

- vue生命周期有哪些？

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

事实真是这样吗？

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

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

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

```

```

做个测试如下

```html

Vue事件处理

v-for和v-if谁的优先级高？应该如何正确使用避免性能问题？

{{child.title}}

```

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

```

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

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

源码中找答案：srccoreinstancestate.js - initData()

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

测试代码如下

```html

Vue事件处理

vue组件data为什么必须是个函数?

```

> 程序甚至无法通过vue检测

**结论**

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

以上就是酷仔今日整理的“Web前端教程：Vue面试题如何做到深入浅出”一文，不知道大家有没有一些收获，希望为准备面试Web前端的同学提供参考。本文整理了两道Vue面试题，酷仔会持续更新剩余的部分。