nextTick

怎么理解nextTick

当我们触发事件更新dom后，无法第一时间获取到最新值，这个时候就要用到nextTick，他可以帮助我们在下一次dom执行后 更新他的回调函数

nextTick原理

浏览器事件循环机制

    浏览器对于事件的处理是有自己的一套机制，同步代码进入执行栈，异步代码进入异步队列，异步任务分为宏任务和微任务
    

宏任务和微任务

宏任务是浏览器带来的函数，一般包括：script （主代码块）、setTimeout 、setInterval 、 setImmediate 、I/O 、UI rendering

微任务是语言带来的函数，一般包括：Promise.then、MuationObserver、process.nextTick（Nodejs） 、promise 、Object.observe 、MutationObserver

执行顺序

当浏览器执行时，会先执行同步任务，然后执行异步任务，执行异步任务时，会先执行微任务，把微任务队列清空后，再去执行一个宏任务，然后在看此时的微任务队列，如此循环，知道宏任务微任务清空

同步——>异步（微任务（清空）——>宏任务）

keep-alive

keep-alive是什么

keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

主要是有include、exclude、max三个属性；前两个属性允许keep-alive有条件的进行缓存；max可以定义组件最大的缓存个数，如果超过了这个个数的话，在下一个新实例创建之前，就会将以缓存组件中最久没有被访问到的实例销毁掉。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive的生命周期

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序：

created ->  mounted->   activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

举个栗子

home.vue

 <template>
   <div class="home">
       <input placeholder="输入框">
   </div>
 </template>

 <script>export default {
      name: 'home',
      components: {
        HelloWorld
      },

    }
 </script>

About.vue

<template>
   <div class="about">
      <h1>This is an about page</h1>
   </div>
</template>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive include="home">
      <router-view/>
    </keep-alive>

  </div>
</template>

<script>
import Home from "./views/Home.vue"
import About from "./views/About.vue"

export default{
  components: {
    Home,
    About
  },
}
</script>

重重重重重重重重点！！！

name：'home'

include:'home'