VUE常见面试题

**

1.v-show和v-if的区别

**
v-show：使用display:none的方法将DOM元素进行隐藏，会渲染在DOM树上
v-if：不会渲染在DOM树上

总结：若频繁的切换某节点时，使用v-show。

2.为何要在v-for中使用key

• key值主要是提高虚拟DOM的效率
• 往数组添加数据时，只要新渲染这一条数据就可以了,其他都是就复用之前的了。（ diff算法通过tag和key来判断，是否为sameNode，减少渲染次数，提高渲染性能 ）
• 新增数据时，防止数据错乱，可见v-for为什么要使用key

3.描述VUE组件生命周期（有父子组件）

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

有父子组件的情况：
beforeCreate（父） -> beforeCreate（子）-> created（子）-> created（父）
beforeDestroy（父） -> beforeDestroy（子）-> destroyed（子）-> destroyed（父）

4.VUE组件如何通讯

1.父组件与子组件之间通讯

• 父组件通过v-bind形式在子组件上绑定值，子组件在props上接收
• 子组件通过this.$emit(event,值)的形式传递值给父组件，父组件通过v-on绑定事件接收
• .sync修饰符，属于update:property的一个语法糖，可见.sync修饰符

2.兄弟组件之间通讯

• 通过vuex状态管理，共享数据
• 通过自定义事件通讯，其中一个组件通过this.$emit(event,值)的形式传递，另一个组件在mounted()方法中通过this.$on(event,methods)

5.描述组件渲染和更新的过程

初次渲染过程

• 解析模板为render函数
• 触发响应式，监听data属性getter setter
• 执行render函数，生成vnode，patch（elem，vnode）

更新过程

• 修改data，触发setter（上图中data在getter中已被监听）
• 重新执行render函数，生成newVnode
• patch（vnode，newVnode）