nextTick

nextTick原理：

官方定义是：它可以在 DOM 更新完毕之后执行一个回调函数，并返回一个 Promise。他的意思就是说，Vue在更新DOM时是异步执行的。当数据发生变化，Vue讲开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空队列。

nextTick源代码：

Vue.prototype.$nextTick = function (fn) {
  return nextTick(fn, this)
};
// 构造函数上定义的方法
Vue.nextTick = nextTick;

// 实际的定义
var callbacks = [];
function nextTick (cb, ctx) {
    var _resolve;
    // callbacks是维护微任务的数组。
    callbacks.push(function () {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    if (!pending) {
      pending = true;
      // 将维护的队列推到微任务队列中维护
      timerFunc();
    }
    // nextTick没有传递参数，且浏览器支持Promise,则返回一个promise对象
    //如nextTick().then(() => {})
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }

用法：

在vue中有nextTick这个API，官方解释，它可以在DOM更新完毕之后执行一个回调。
一般使用

<template>
  <div>{{ name }}</div>
</template>
<script>
export default {
  data() {
    return {
      name: ""
    }
  },
  mounted() {
    console.log(this.$el.clientHeight) // 0
    this.name = "jeff"
    console.log(this.$el.clientHeight) // 0
    //整个脚本是个宏任务,执行完后执行渲染,然后执行下一个宏任务时取出微任务
    this.$nextTick(() => {
      console.log(this.$el.clientHeight) // 18
    });
  }
};
</script>

nextTick本质是一种优化策略！！！

nextTick使用场景：

第一种：有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理

第二种：在使用某个第三方插件时，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法，例如:应用滚动插件better-scroll时

第三种：数据改变后获取焦点

keep-Alive

keep-Alive概念：

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用：

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

- 原理

：在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

参数：

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

对生命周期的变化 1.activated

在 keep-alive 组件激活时调用该钩子函数在服务器端渲染期间不被调用 2.deactivated

在 keep-alive 组件停用时调用该钩子在服务器端渲染期间不被调用被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated 使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

keep-alive用法

例如一个搜索框，输入文字后，切换到另一个组件，再返回的时候input框的文字会消失，所以要使文本框组件缓存

<keep-alive include="home">
   <router-view />
</keep-alive>

keep-alive结合路由中的meta属性来控制组件缓存

      path: '/',
      name: 'home',
      meta:{
        keepAlive:true
      },
      component: Home
    }

将home的路由规则中的meta添加keepAlive属性为true，则当前路由组件要进行缓存
keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

带你简单了解nextTick和keep-Alive