vue常见性能优化方式和一些基础知识

一、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)