Vuejs进阶知识(二十一)【生命周期，最佳实践】

Vuejs的生命周期

每个 Vuejs 的实例，都会经历下图的生命周期。

可以看出，基本周期是：

1. created (创建好DOM)
2. mounted (页面基本准备好了。)
3. updated (update 可以理解成人肉手动操作触发)
4. destroyed （销毁)

上面步骤中的 1,3,4都是自动触发。 每个步骤都有对应的 beforeXyz方法

所以, 我们一般使用 mounted 作为页面初始化时执行的方法

---

最佳实践

适当的使用vuex

能不用就不用。 能用就用。

不要为了使用而使用，例如一个小方法就可以搞定的事情，搞出五个设计模式来实现。

不要过度使用CSS框架

因为CSS框架一般会大幅度增加文件体积。 例如 bootstrap, ele.me前端框架。 这个在低端安卓机上影响显著。 特别是使用Android中的 Webview 来加载H5页面时，基本上1k大小的CSS就会消耗1ms.

而CSS框架动辄几百K，每次手机端都要等好久，才会打开对应的页面。

使用CDN来存放图片文件

例如， upyun 就是个不错的选择。 阿里的oss也很好。

js, css 尽量使用压缩

我们在nginx中可以设置这一项。 让js, css 都以zip的形式来发送和接收，一般都会有效减少30%-60%的体积和传送时间。 具体请参考nginx文档。

灵活使用第三方Vue 插件

例如： 轮播图， 表单验证等等。这些轮子都是现成的。

好的程序员不一定算法好，但一定是一个对各种第三方组件见多识广的人。

前端逻辑务必简单

能在后台处理的，绝对不要放在前端处理。 因为Vuejs 擅长的不是处理数据结构。

例如，前端需要展示一个列表的话，后端的接口就应该给出JSON中的数组， 而不是给出一个字符串，然后由前端去解析。

不用写行末分号。

Vuejs 源代码中没有一行有 “行末分号”。会有es 预处理器帮我们填上的。

灵活使用CSS，HTML预处理工具

我们知道，

• JADE， HAML可以生成HTML，
• SASS， SCSS，LESS可以生成CSS

如果是公司的人数比较多，有UI， 有前端，那么建议大家使用的话要慎重。建议直接使用原生的HTML，CSS。 因为UI设计师同学不一定看得懂SCSS, JADE

如果是一个人独立负责整个项目，那么用JADE, SCSS也没问题。