vue是如何避免重复渲染的？

Posted 2023-04-13

参考技术A 上一篇 vue双向绑定原理源码解析

上一篇文章我们说了vue双向绑定原理，每个watcher对象都绑定了唯一的id，当组件props和data对象属性发生变化时，将会触发watcher对象update方法，

lazy属性是避免computed属性里用到（props和data）对象属性变化导致的重复调用update

默认情况下watcher对象的sync是false，会调用queueWatcher方法

这个方法里主要判断了当前工作队列中是否已经有这个watcher对象，

如果工作队列中没有此而且队列也还没开始执行，加到队列中去。

如果工作队列中没有watcher对象，但是队列已经开始执行，如果插入位置小于等于当前正在执行的warcher位置，则插入当前的执行warcher的后面。如果插入位置大于当前正在执行的warcher位置，则比较执行位置index后面watcher的id 和 传入watcher的id

nextTick是异步执行方法，vue对此进行了封装，针对不同浏览器对js原生异步的函数的支持，简单点理解就是一个setTimeout方法

因为是异步执行方法，所以在主线程的方法执行完，才执行任务队列中flushSchedulerQueue，

下面我们来看一个列子：

测试下来name属性变化了三次，但是只触发了一次更新。我们来分析一下原因：

name属性第一次改变时，queue中插入  name属性里Dep对象下的所有watcher对象，因主线程函数并没执行完，此时flushSchedulerQueue方法还在等待

name属性第二次改变时，queue中并没有插入name属性里Dep对象下的所有watcher对象，此时flushSchedulerQueue方法还在等待

name属性第三次改变时，queue中还是没有插入name属性里Dep对象下的所有watcher对象，此时主线程函数执行完毕，回调任务队列中flushSchedulerQueue方法，更新视图

Vue教程(四十六)keep-alive快速实现页面缓存

Vue教程(四十六)keep-alive快速实现页面缓存

什么是keep-alive

默认情况组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到 keep-alive 组件。

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

keep-alive 的生命周期

初次进入时：created > mounted > activated；退出后触发 deactivated 钩子函数。

再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中。

在vuecli2\\src\\components\\User.vue中验证执行过程

<template>
  <div>
    <h2>用户信息</h2>
    <span>{{$route.query}}</span>
  </div>
</template>
<script>
export default {
  name: 'User',
  created () {
    console.log('user created')
  },
  mounted () {
    console.log('user mounted')
  },
  destroyed () {
    console.log('user destroyed')
  },
  activated () {
    console.log('user activated')
  },
  deactivated () {
    console.log('user deactivated')
  }
}
</script>

执行结果：

使用 keep-alive 组件

• 修改【vuecli2\\src\\App.vue】文件

<!-- 缓存页面数据 -->
<keep-alive>
  <!-- < router-view>:该标签会根据当前的路径,动态渲染出不同的组件-->
  <router-view />
</keep-alive>

keep-alive 组件提供了以下几个重要的属性：

1. include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
2. exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3. max - 数字。最多可以缓存多少组件实例。

<!-- 多个用逗号分隔字符串 --> 
<keep-alive include="home,about">
    <router-view />
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/home|about/">
    <router-view />
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['home', 'about']">
    <router-view />
</keep-alive>

max 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="5">
    <router-view />
</keep-alive>

    – 以上为《Vue教程(四十六)keep-alive快速实现页面缓存》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)