VUE面试

Key的作用

1. 为了更高效的对比虚拟DOM中的某个节点是否是相同节点。

2. Vue在patch过程中判断两个节点是否是相同节点，key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，Vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。

3. 实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；Vue中在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让Vue可以区分它们，否则Vue只会替换其内部属性而不会触发过渡效果。

4. 从源码中可以知道，Vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置，它的值就是是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的DOM更新操作，明显是不可取的。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。相当于给数组的每个元素都绑定唯一的key，如果某个key对应的元素发生变化，直接更新对应的dom就行，不用全部更新一遍。

这也是vue不推荐使用数组下标index作为key的原因。例如数组删除了一个元素，那么这个元素后方元素的下标全都前移了一位，之前index对应的dom和现在index对应的dom就会错位，导致之后的dom操作位置混乱。

组件通信的方式

• vuex

• props/$emit：父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信。

  props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。
  $emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

• ref / $refs：这种方式也是实现父子组件之间的通信，ref：这个属性用在子组件上，它的作用就指向了子组件的实例，可以通过实例来访问组件的数据和方法。

• eventBus事件总线（$emit / $on）
  eventBus事件总线适用于父子组件、非父子组件等之间的通信。

• 依赖注入（provide / inject）：父子间通信，不需要一层一层传递数据。

• $parent / $children

• $attrs / $listeners

## 总结

• 父子组件间通信

  子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
  通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
  使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

• 跨代组件间通信

  跨代组件间通信其实就是多层的父子组件通信，同样可以使用上述父子组件间通信的方法，只不过需要多层通信会比较麻烦。
  使用上述的6种方法的$attrs / $listeners方法。

• 兄弟组件间通信

  通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。

• 任意组件间通信

  使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
  如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。