Vue开发注意点小记

当keep-alive遇上v-if

• 1.现象：使用keep-alive包裹的组件，首次加载会走的钩子created()->activated(),之后页面切换（不刷新），只走activated()和deactivated()钩子。但是如果父组件包裹子组件使用了v-if判断，则子组件首次加载时只走created()钩子，不走activated()钩子，页面切换时，子组件只走activated()钩子。
• 2.代码实践：

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

<template>
  <div>子组件</div>
</template>
<script>
export default {
  name: 'B',
  created() {
    console.log('component B created');
  },
  activated() {
    console.log('component B activated');
  },
  deactivated() {
    console.log('component B deactivated');
  }
}
</script>

// A.vue
<template>
  <div>父组件
    <b v-if="isShow"></b>
    <b v-show="isShow"></b>
  </div>
</template>
<script>
import B from './B.vue';
export default {
  name: 'A',
  components: {
    B
  },
  data() {
    return {
      isShow: false
    }
  },
  created() {
    console.log('component A created');
    // setTimeout模拟通过请求或逻辑判断，再展示B组件
    setTimeout(() => {
      this.isShow = true;
    }, 30);
  },
  activated() {
    console.log('component A activated');
  },
  deactivated() {
    console.log('component A deactivated');
  }
}
</script>

• 2.1使用v-if控制台输出

// 首次加载页面A时输出
component A created
component A activated
component B created

//从页面A切换到其他页面
component B deactivated
component A deactivated

// 从其他页面再切回页面A
component B activated
component A activated

• 2.2使用v-show控制台输出

// 首次加载页面A时输出
component A created
component B created
component B activated
component A activated

//从页面A切换到其他页面
component B deactivated
component A deactivated

// 从其他页面再切回页面A
component B activated
component A activated

• 3.结论：v-if="false"并不会将虚拟dom渲染在dom上，只有当值为true才会进行渲染，此时才把组件加入到 keep-alive可缓存的白名单里，而v-show无论值为true或者false，都会在首次加载时就加入到keep-alive白名单里，走created 和 activated钩子。

未完待续...