1、Vue组件之间通信方式有哪些？

分析：

vue是组件化开发框架，所以对于vue应用来说组件间放入的数据通信非常重要。此题主要考察大家vue基本功，对于vue基础api熟练度。另外一些边界知识如provide/inject/$attrs则体现了面试者的知识广度。

组件传参的各种方式

思路分析：

1. 总述知道的所有方式
2. 按组件关系阐述使用场景

回答范例：

1. 组件通信常用方式有以下8种：

• props
• $emit / $on
• $children / $parent
• $attrs / $listeners
• ref
• $root
• eventbus
• vuex

注意vue3废弃的几个Api

• $children
• $listeners
• v-on.native

2、根据组件之间关系讨论组件通信最为清晰有效

• 父子组件
  – props / $emit / $parent / ref / $attrs

• 兄弟组件
  – $parent / $root / eventbus / vuex

• 跨层级关系
  – eventbus / vuex / provide + inject

2、v-if 和 v-for哪个优先级更高

分析：

此题考查常识，文档中曾有详细说明 v2 | v3；也是一个很好的实践题目，经常会遇到，能够看出面试者api熟悉程度和应用能力。

思路分析：

1. 先给出结论
2. 为什么是这样，说出细节
3. 那些场景可能导致我们这样做，该怎么处理
4. 总结，拔高

回答范例：

1. 实践中不应该把v-for和v-if放在一起使用
2. 在vue2中，v-for的优先级是高于v-if的，把他们放在一起，输出的渲染函数中可以看出会先执行循环再执行判断，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行的时候，它调用的变量还不存在，就会导致异常
3. 通常会有两种情况下导致我们这样做：

• 为了过滤列表中的项目（比如 v-for="item in list" v-if="item.isShow"），此时定义一个计算属性或者直接v-for时过滤改列表（比如：v-for="item in list.filter(codin => codin.age > 0)"）
• 为了过滤本该被隐藏的列表（比如 v-for="item in list" v-if="isShow" ），此时把v-if移动至容器元素上（比如 ul、ol）或者外面包一层 template即可

4. 文档中 明确指出 永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个注意事项
5. 源码里面关于代码生成的部分，能够清晰地看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生一些症状的不同，但是不管怎样都是不能把它们写在一起的。