## vue 性能优化方案 * 函数组件的使用 * 拆分子组件 * 使用局部变量 ### 1. 函数组件，降低渲染开销 是一个只接收 prop 的函数，内部没有管理任何状态，没有响应式数据，也没有this 组件需要的一切需要通过 context 参数传递 ``` <template functional> </template> ``` 疑问：虽然函数式组件没有自己的响应式数据，可以降低渲染开销，但是传入的数据会变，视图还是需要更新，这个的原理是什么呢 #### 函数组件的原理 对比普通组件，不会有递归子组件的过程  ### 2. 拆分子组件 react： 当数据发生变化的时候，会以当前组件为根，重新渲染整个组件的子树，除非子树是 pureComponent，或者手动指定shouldComponentUpdate为false。 vue：不需要考虑自组件重新渲染的问题 把耗时的任务放在子组件里，这样即使父组件重新渲染，子组件内部没有响应式数据，就不会重新渲染了 #### 子组件拆分的原理 vue更新的时候，是以组件为最小颗粒度进行更新的，只会精确更新依赖收集的当前组件，不会递归更新子组件 ### 3. 局部变量 只能在当前变量声明的函数内部调用 因为vue有数据侦测，有时候一些数据，不需要进行依赖收集，这样就减少不必要的依赖收集过程。 ### 总结 什么场景下适合使用上述技巧 1. 函数组件: 纯渲染组件 2. 子组件拆分：把耗时的任务放在子组件中 3. 局部变量：函数中通过局部变量的方式减少调用栈