5. Vue 面试真题演练

1. v-show&nbsp; 通过CSS display控制显示和隐藏<br>2. v-if&nbsp; 组件真正的渲染和销毁，而不是显示和隐藏<br>3. 频繁切换显示状态用v-show，否则用v-if

1. 必须用key，而不能是index和random<br>2. diff算法中通过tag和key来判断，是否是sameNode<br>3. 减少渲染次数，提升渲染性能

1. 单组件生命周期图<br>2. 父子组件生命周期关系

1. 父子组件&nbsp; props和this.$emit<br>2. 自定义事件event.$on&nbsp; &nbsp;event.$off&nbsp; event.$emit<br>3. vuex

1. input元素的&nbsp; value=this.name<br>2. 绑定input事件 this.name=$event.target.value<br>3. data更新会触发re-render

1. 缓存，data不变不会重新计算<br>2. 提高性能

vue组件的export default看似是一个对象，实际上在编译之后vue是一个class类，在不同地方多处使用这个vue组件时，相当于是对这个类的实例化。实例化时去执行data，如果data不是函数，那多处实例化的这个组件的data数据都会是一样了，改变一个data变量，也会影响其它实例化了这个组件的这个变量。但是如果data是函数，data中的数据就会在闭包中，不会相互影响。<br>所以data必须是一个函数。

1. mounted（组件已经渲染完，DOM加载完）<br>2. JS是单线程的，ajax异步获取数据<br>3. 放在mounted之前没有用，只会让逻辑更加混乱<br>（在mounted之前，js没有渲染完，数据也是异步获取过程中，不会有提前的效果）

1. $props<br>2. &lt;User v-bind='$props'/&gt;<br>3. 细节知识点，优先级不高

1. mixin<br>2. 以及mixin的一些缺点<br>

1. 加载大组件<br>2. 路由异步加载

1. 缓存组件，不需要重复渲染<br>2. 多个静态tab页的切换<br>3. 优化性能

1. 解绑自定义事件event.$off<br>2. 清楚定时器<br>3. 解绑自定义DOM事件，如window scroll等

防止内存泄露

1. action中处理异步，mutation不可以<br>2. mutation做原子操作<br>3. action可以整合多个mutation

1. hash默认<br>2. H5 history(需要服务端支持)<br>3. 两者比较

1. Object.defineProperty<br>2. 以及对象深度监听、监听数组<br>3. 有何缺点

1. Object.defineProperty不能监听数组变化<br>2. 重新定义原型，重写push pop等方法，实现监听<br>3. Proxy可以原生支持监听数组变化

1. 监听data变化<br>2. 组件渲染和更新流程

1. O（n）<br>2. 在O(n^3)基础上做了一些调整<br>同一层级比较。。。。

1.&nbsp; patch(elem,vnode)和patch(vnode,newVnode)<br>2. patchVnode和addVnodes和remoVnodes<br>3. updateChildren（key的重要性）

1. 异步渲染（以及合并data修改）以提高渲染性能<br>2. $nextTick在DOM更新完之后，触发回调

1. 合理使用v-show和v-if<br>2. 合理使用computed<br>3. v-for时加key，以及避免和v-if同时使用<br>4. 自定义事件、DOM事件及时销毁<br>5. 合理使用异步组件<br>6. 合理使用keep-alive<br>7. data层级不要太深<br>8. 使用vue-loader在开发环境做模板编译（预编译）<br><br>9. webpack层面的优化（后面讲）<br>10. 前端通用的性能优化，如图片懒加载<br>11. 使用SSR