vue性能优化

函数式组件和普通的对象类型的组件不同，它不会被看作成一个真正的组件，在 patch 过程中，如果遇到一个节点是组件 vnode，会递归执行子组件的初始化过程；而函数式组件的 render 生成的是普通的 vnode，不会有递归子组件的过程，因此渲染开销会低很多。

把耗时任务的函数执行逻辑用子组件封装，由于 Vue 的更新是组件粒度的，虽然每一帧都通过数据修改导致了父组件的重新渲染，但是子组件却不会重新渲染，因为它的内部也没有任何响应式数据的变化。所以优化后的组件不会在每次渲染都执行耗时任务，自然执行的 JavaScript 时间就变少了。

计算属性用到的变量采用局部变量,否则多次访问this.xxx时会触发它的getter,进而会执行依赖手机的相关逻辑  只需要在计算属性参数里接受对应变量,然后赋值给局部变量,这样只会执行一次getter

v-show相比v-if销毁DOM和创建新DOM 性能更高

缓存组件,减少渲染, 但是会占用更多的内存去做缓存

解决渲染大量数据卡顿的情况  把一个组件的一次渲染拆成多次  通过v-if控制, 在mixin里自增变量, 自增到对应值时才开始渲染v-if控制的DOM

提交大量数据 分段提交    防止js执行时间过长,阻塞UI线程 导致页面卡死   requestAnimationFrame 保证的是在浏览器每一次重绘后会执行对应传入的回调函数

内部提交的数据的时候，会默认把新提交的数据也定义成响应式，如果数据的子属性是对象形式，还会递归让子属性也变成响应式，因此当提交数据很多的时候，这个过程就变成了一个耗时过程。

优化后把新提交的数据中的对象属性 data 手动变成了 configurable 为 false，这样内部在 walk 时通过 Object.keys(obj) 获取对象属性数组会忽略 data，也就不会为 data 这个属性 defineReactive，由于 data 指向的是一个对象，这样也就会减少递归响应式的逻辑，相当于减少了这部分的性能损耗。数据量越大，这种优化的效果就会更明显。

只渲染视口内的 DOM,   监听滚动事件，动态更新需要显示的 DOM 元素，计算出它们在视图中的位移