作为一个新晋菜鸟,我来谈谈我眼中的VUE优化。
无论是做什么项目用什么语言,都是需要优化的,那么今天就来说一说 VUE中需要优化的点。
VUE优化篇
1,组件方面的优化
- 对第三方组件库按需引入,当我们仅需要一个组件库中的个别组件时,我们可以进行组件的按需导入
- 对较长且不改变的数组进行冻结(Object.freeze())处理,vue组件在对data里的属性拦截时,会判断出被冻结的对象是不可被修改的,会直接跳过 get set的操作,这样便可以降低vue组件的render时间,提升页面性能
- 可以把在多个组件中使用的功能进行封装,在需要的组件内进行引入,提高代码的复用
- v-for时使用key值,通过每一项中唯一的key,对其进行精确的渲染,当新值和旧值去对比时,可以更快的定位到diff
- 避免v-for和v-if的连用,当需要遍历的数组过长,而需要渲染的节点较少时,使用v-if回造成性能的浪费
- 一般来说当我们的页面内使用router-view来渲染子路由时,我一般可以通过keep-alive来对组件进行缓存,这样可以避免组件的重复创建和渲染。
- computed和method区分使用场景:(1)computed:是计算属性,依赖其他属性,并且computed的值有缓存,只有它依赖的属性值发生改变,下一vi获取computed的值才会重新计算computed的值;(2)当我们需要进行数值计算,并且依赖其他数据时应该使用computed,因为可以利用computed的缓存特性,避免每次获取值时,都要重新计算
Render
1,render函数
- .vue文件最终回被vue-template-compiler渲染为render函数,render函数执行并创建虚拟DOM
- render函数的作用:(1)动态的创建组件(2)代替组件的templa模板
2,那什么又是虚拟DOM呢?
虚拟DOM就是JS对象模拟DOM结构,形成的完整的DOM树,里面包含了DOM信息
3,为什么要使用虚拟DOM
- 之前使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情,往往是DOM标签和js逻辑同时写在js文件里,数据交互时不时还要写很多的input隐藏域,如果没有好的代码规范的话会显得代码非常冗余混乱,耦合性高并且难以维护。
- 另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的,常常会出现页面卡死的情况;所以尽量减少对DOM的操作成为了优化前端性能的必要手段,vdom就是将DOM的对比放在了js层,通过对比不同之处来选择新渲染DOM节点,从而提高渲染效率
VUE插件开发、
通过vue.use来注册插件(如果插件是一个对象,必须提供install方法,install方法调用时,会将vue作为参数传入)