vue高级

一：vue源码优化：

1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好。

2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。v-for比v-if优先级高，如果都遍历一个数组会影响速度，尤其时渲染很小一部分，所以应该替换成computed属性

3、Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。

4、更加理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。

5、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

6、图片资源懒加载：图片过多会影响页面加载的速度，我们可以等图片滚动到可视区域后再加载，这样吧会提高用户的体验，在项目中用vue中的vue-lazyload插件

二：打包优化

1、修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。

2、使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

3、减少图片使用，因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。

4、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。

三：长列表性能优化

vue 会通过Obiect.defineProperty对数据进行劫持，来实现视图响应数据变化，有时纯粹的数据展示，我们就不需要vue来劫持我们的数据。这时我们可以通过Object.freeze方法来冻结一个对象，冻结完就不能被修改了

 虚拟列表进行优化：

当列表大概有2万条数据，又不让做成分页，如果页面直接渲染2万条数据，在一些低配电脑上可能会照成页面卡死，基于这个需求，我们需要运用虚拟列表

虚拟列表其实没有什么特别神奇的地方，说白了就是一种展示列表的思路，在页面上创建一个容器作为可视区，在这个可视区内展示长列表中的一部分，也就是在可视区渲染列表。

render函数：

使用render函数我们可以用js语言来构架DOM

.vue文件最终会被vue-template-compiler渲染为render函数

render 函数执行创建虚拟dom节点

vdom 通过diff算法和patch更新为真实的dom

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具有一个约定的简写h

vue-插件

通过Vue.use来注册插件

vue-lazyload：

懒加载原理：

一开始不给src添加值 这样渲染的时候不加载图
片判断图片是否在可视区域 根据滚动事件判断 
记得节流是的话通过new Image()请求图片 核心
再设置setAttribute

加载图片：

 vue-lazyload插件原理:

声明一个ReactiveListener类，一个图片相当于ReactiveListener一个实例

监听最外层父级dom滚动事件，触发scroll事件时，其回调函数就会调用checkInView，如果为true则调用load进行加载图片