标签：VUE computed DOM 菜鸟 渲染 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作为参数传入）
标签：VUE,computed,DOM,菜鸟,渲染,vue,初学,组件 来源： https://blog.csdn.net/qq_41936685/article/details/120420974
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。