keep-alive

☠️ 踩坑，v-if连用会报错，把我坑惨了！（即使我不喜欢感叹号）

[45 /* X_KEEP_ALIVE_INVALID_CHILDREN */]: `<KeepAlive> expects exactly one child component.`,

多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

<keep-alive>
  <StateA v-if="state == 'A'" />
  <StateB v-else-if="state == 'B'" />
  <StateC v-else="state == 'C'" />
</keep-alive>

在模板中使用 ref 将自动解包，只有访问嵌套的 ref 时需要在模板中添加 .value

A

import { defineComponent, ref } from "vue";

const StateA = defineComponent({
  mounted() {
    console.log("A mounted");
  },
  destroyed() {
    console.log("A destroyed");
  },
});

const StateB = defineComponent({
  mounted() {
    console.log("B mounted");
  },
  destroyed() {
    console.log("B destroyed");
  },
});

const StateC = defineComponent({
  mounted() {
    console.log("C mounted");
  },
  destroyed() {
    console.log("C destroyed");
  },
});

export default {
  components: {
    StateA,
    StateB,
    StateC,
  },
  setup() {
    let state = ref("A");

    function changeState(s) {
      state.value = s;
      // console.log(state);
    }

    return {
      state,
      changeState,
    };
  },
};

v-if

DOM重建|销毁

v-show

display: none;

CSS属性切换

小结

• v-if 有更高的切换开销
• v-show 有更高的初始渲染开销
• keep-alive 结合两者优点