vue 渲染 和 vue性能优化

链接：https://www.cnblogs.com/zhilu/p/13810788.html

Vue的渲染小结

回过头来看，这里的渲染逻辑并不是特别复杂，核心关键的几步流程还是非常清晰的：

1. new Vue，执行初始化
2. 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3. 通过Watcher监听数据的变化
4. 当数据发生变化时，Render函数执行生成VNode对象
5. 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

至此，整个new Vue的渲染过程完毕。

性能优化（代码层面优化）

1.1、v-if 和 v-show 区分使用场景

v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

1.2、computed 和 watch 区分使用场景

**computed：**是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
**watch：**更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

1.3、v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key
在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
（2）v-for 遍历避免同时使用 v-if
v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

1.6、图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

1.8、第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：

https://zhuanlan.zhihu.com/p/78467131

本周使用到的：

1.四个数组展示，判断一个数组，处理四个数组。

2. 图表显示一侧，再刷新不显示。在调用组件的位置，添加一个：v-if="flag"，初始值为 flag: false, 请求完数据之后 flag: true。

3.历史页面数据展示：

表格之前是传入两个坐标轴数据，显示一条折线

现在后端传过来的是{时间："", 语文："" ,数学：“”} 数据，需要将语文数学各个科目分别展示成一条折线图。可以使用dataset方法传入原始数据。然后再设置每一个折线图的类别。

修改echarts 组件，单线图修改成为多线图。