vue学习笔记---项目优化篇之代码优化

v-for循环设置key值

    给每一个遍历项绑定唯一的key，state更新时，可以便于Diff算法准确的识别改变的节点（ps: 如果没有设置key，数组若长度发生变化后DOM的更新可能会与开发者所期望的不一致，具体可以看看Diff算法的处理方法）。

v-for循环时避免使用v-if

    v-for优先级比v-if高，如果两者同时使用会影响渲染速度。

    解决办法：如果v-if的判断条件和遍历项无关，则将v-if放到v-for外层进行判断；反之，使用计算属性computed过滤掉数组里面不需要的元素再进行遍历。

v-if和v-show

    v-if在条件变换时会对内容进行相应的销毁和重建，而v-show不管条件是什么都会进行渲染，只是控制其内容的显隐。所以，如果条件改变频繁情况下使用v-show；反正使用v-if。

vue生命周期

    组件销毁时，会自动解绑全部指令以及事件监听器，但是不会销毁定时器，所以在组件销毁时需要手动去除定时器。

路由懒加载

    vue是单页面应用，如果项目过大的时候可能会导致首页加载变慢，这时候可以把不同路由对应的组件分割成不同代码块，当路由被访问时再加载对应组件（ps：如果项目不大或首页加载速度不错的情况下可以不用路由懒加载，因为路由懒加载在首屏的加载速度提升的同时其他页面的加载速度会相应慢下来）。

图片懒加载

    可以使用vue-lazyload库

第三方库按需加载

    以element-ui为例，可只引入自己所需的组件（ps: 借助babel-plugin-component，具体使用方法自己百度）

keep-alive

    包裹动态组件时，可缓存该组件实例，在组件切换时将状态保留在内存中，防止重复渲染DOM；

    实现原理：将VNode节点保存在cache中，渲染时通过VNode的name判断看cache中是否有该节点缓存，如果有，则取出之前缓存的VNode实例进行渲染；

    专属生命周期：activated和deactivated

服务器端渲染

    html渲染工作将在服务器端完成，然后返回给web端这个过程叫服务器端渲染。

    优点：因为页面直接由服务器端返回，首屏加载会更快完成，并且更有利于SEO（搜索引擎并不会等到ajax异步完成之后再抓取spa页面内容，所以ajax获取到的内容是搜索引擎无法抓取的）。

     缺点：加重服务器负载，且不利于前后端分离。

防抖和节流

    短时间（ps：如1秒内）监听事件被频繁触发时，利用防抖/节流方法控制任务执行次数

函数式组件

     函数式组件比普通组件性能更好，缺点是定义的数据没有响应式