Vuejs
的生命周期
每个 Vuejs
的实例,都会经历下图的生命周期。
可以看出,基本周期是:
created
(创建好DOM)mounted
(页面基本准备好了。)updated
(update
可以理解成人肉手动操作触发)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
也没问题。