共计 863 个字符，预计需要花费 3 分钟才能阅读完成。
一、vue 常见性能优化方式
1、由于 vue2+ 是采用 Object.defineProperty 进行递归监听 data 数据的变化，所以组建中 data 中的数据不要设置的太深，否则组件渲染时会影响性能；
2、①自定义事件、dom 事件用完要及时销毁；
②合适使用异步组件;
③合理使用 keep-alive, 比如要缓存组件，不需要重复渲染时，比如多个静态 tap 页的切换，比如优化性能时；注意：使用 keep-live 后 像定时器清除时放在 beforeDestroy 中会失效，不能及时清除定时器，应该放在 deactivated 中进行清除。
3、合理使用 v -show 和 v -if; 合理使用 computed; v-for 时要加 key, 以及避免和 v -if 同时使用。
二、vue 基础知识
1、vue 如何监听数组变化
答：Object.defineProperty 不能监听数组变化，需要重新定义原型，重写 push pop 等方法以实现数组的监听，vue3 可以使用 proxy 监听数组变化。
2、vuex 中 action 和 mutation 有何区别？
答：action 中处理异步操作，mutation 则不可以；mutation 中一般都是做原子操作；action 中可以整合多个 mutation。
3、何时需要使用 beforeDestory？
答：解除自定义事件 event.$off 时；清除定时器时；解除自定义的 DOM 事件，如 window scroll 等等。
4、为何在 v -for 中使用 key？
答：必须要使用 key，且不能是 index 和 random；vue 中的 diff 算法要通过 tag 和 key 来判断，是否是 sameNode；减少渲染次数，提升渲染性能；
5、vue 组件是如何渲染和更新的？
答: 初次渲染过程：解析模板为 render 函数，然后触发 vue 响应式，监听 data 属性 getter setter，执行 render 函数，生成 vnode,patch(elem,vnode)。
更新过程：修改 data, 触发 setter, 重新执行 render 函数，生成 newVnode，patch(vnode, newVnode)