初学菜鸟眼中的VUE

作为一个新晋菜鸟，我来谈谈我眼中的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作为参数传入）