683 vue3的动态组件，keep-alive，缓存组件的生命周期，异步组件和Suspense，$refs，$parent和$root，生命周期，组件的v-model

Posted 2021-06-12 Keep going

切换组件案例

---

v-if显示不同的组件

---

动态组件的实现

---

动态组件的传值

---

认识keep-alive

---

keep-alive属性

---

缓存组件的生命周期

---

App.vue

<template>
  <div>
    <button
      v-for="item in tabs"
      :key="item"
      @click="itemClick(item)"
      :class="{ active: currentTab === item }"
    >
      {{ item }}
    </button>

    <!-- 2.动态组件 -->
    <keep-alive include="home,about">
      <component
        :is="currentTab"
        name="coderwhy"
        :age="18"
        @pageClick="pageClick"
      >
      </component>
    </keep-alive>

    <!-- 1.v-if的判断实现 -->
    <!-- <template v-if="currentTab === \'home\'">
      <home></home>
    </template>
    <template v-else-if="currentTab === \'about\'">
      <about></about>
    </template>
    <template v-else>
      <category></category>
    </template> -->
  </div>
</template>

<script>
  import Home from "./pages/Home.vue";
  import About from "./pages/About.vue";
  import Category from "./pages/Category.vue";

  export default {
    components: {
      Home,
      About,
      Category,
    },
    data() {
      return {
        tabs: ["home", "about", "category"],
        currentTab: "home",
      };
    },
    methods: {
      itemClick(item) {
        this.currentTab = item;
      },
      pageClick() {
        console.log("page内部发生了点击");
      },
    },
  };
</script>

<style scoped>
  .active {
    color: red;
  }
</style>

---

Home.vue

<template>
  <div @click="divClick">
    Home组件: {{name}} - {{age}}
  </div>
</template>

<script>
  export default {
    name: "home",  // home是字符串
    props: {
      name: {
        type: String,
        default: ""
      },
      age: {
        type: Number,
        default: 0
      }
    },
    emits: ["pageClick"],
    methods: {
      divClick() {
        this.$emit("pageClick");
      }
    }
  }
</script>

<style scoped></style>

---

About.vue

<template>
  <div>
    <div>About组件</div>
    <button @click="counter++">{{ counter }}</button>
  </div>
</template>

<script>
  export default {
    name: "about",
    data() {
      return {
        counter: 0,
      };
    },
    created() {
      console.log("about created");
    },
    unmounted() {
      console.log("about unmounted");
    },
    activated() {
      console.log("about activated");
    },
    deactivated() {
      console.log("about deactivated");
    },
  };
</script>

<style scoped></style>

---

Category.vue

<template>
  <div>
    <div>Category组件</div>
    <button @click="counter++">{{ counter }}</button>
  </div>
</template>

<script>
  export default {
    name: "category",
    data() {
      return {
        counter: 0,
      };
    },
  };
</script>

<style scoped></style>

---

Webpack的代码分包

---

Vue中实现异步组件

---

异步组件的写法二

---

异步组件和Suspense

---

App.vue

<template>
  <div>
    App组件
    <home></home>

    <suspense>
      <template #default>
        <async-category></async-category>
      </template>
      <template #fallback>
        <loading></loading>
      </template>
    </suspense>
  </div>
</template>

<script>
  import { defineAsyncComponent } from "vue";

  import Home from "./Home.vue";
  import Loading from "./Loading.vue";

  // import AsyncCategory from \'./AsyncCategory.vue\';
  const AsyncCategory = defineAsyncComponent(() =>
    import("./AsyncCategory.vue")
  );

  const AsyncCategory = defineAsyncComponent({
    loader: () => import("./AsyncCategory.vue"),
    loadingComponent: Loading,
    // errorComponent,
    // 在显示loadingComponent组件之前, 等待多长时间
    delay: 2000,
    /**
     * err: 错误信息,
     * retry: 函数, 调用retry尝试重新加载
     * attempts: 记录尝试的次数
     */
    onError: function(err, retry, attempts) {},
  });

  export default {
    components: {
      Home,
      AsyncCategory,
      Loading,
    },
  };
</script>

<style scoped></style>

---

Home.vue

<template>
  <div>
    Home组件
  </div>
</template>

<script>
  export default {};
</script>

<style scoped></style>

---

Loading.vue

<template>
  <div>
    Loading
  </div>
</template>

<script>
  export default {};
</script>

<style scoped></style>

---

AsyncCategory.vue

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello Category",
      };
    },
  };
</script>

<style scoped></style>

---

$refs的使用

---

$parent和$root

---

App.vue

<template>
  <div>
    <!-- 绑定到一个元素上 -->
    <h2 ref="title">哈哈哈</h2>

    <!-- 绑定到一个组件实例上 -->
    <nav-bar ref="navBar"></nav-bar>

    <button @click="btnClick">获取元素</button>
  </div>
</template>

<script>
  import NavBar from "./NavBar.vue";

  export default {
    components: {
      NavBar,
    },
    data() {
      return {
        names: ["abc", "cba"],
      };
    },
    methods: {
      btnClick() {
        console.log(this.$refs.title);

        console.log(this.$refs.navBar.message);
        this.$refs.navBar.sayHello();

        // $el
        console.log(this.$refs.navBar.$el);
      },
    },
  };
</script>

<style scoped></style>

---

NavBar.vue

<template>
  <div>
    <h2>NavBar</h2>
    <button @click="getParentAndRoot">获取父组件和根组件</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "我是NavBar中的message",
      };
    },
    methods: {
      sayHello() {
        console.log("Hello NavBar");
      },
      getParentAndRoot() {
        console.log(this.$parent);
        console.log(this.$root);
      },
    },
  };
</script>

<style scoped></style>

---

认识生命周期

---

生命周期的流程

---

App.vue

<template>
  <div>
    <button @click="isShow = !isShow">切换</button>
    <template v-if="isShow">
      <home></home>
    </template>
  </div>
</template>

<script>
  import Home from "./Home.vue";

  export default {
    components: {
      Home,
    },
    data() {
      return {
        isShow: true,
      };
    },
  };
</script>

<style scoped></style>

---

Home.vue

<template>
  <div>
    <h2 ref="title">{{ message }}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello Home",
      };
    },
    methods: {
      changeMessage() {
        this.message = "你好啊, 哈哈";
      },
    },
    beforeCreate() {
      console.log("home beforeCreate");
    },
    created() {
      console.log("home created");
    },
    beforeMount() {
      console.log("home beforeMount");
    },
    mounted() {
      console.log("home mounted");
    },
    beforeUnmount() {
      console.log("home beforeUnmount");
    },
    unmounted() {
      console.log("home unmounted");
    },
    beforeUpdate() {
      console.log(this.$refs.title.innerhtml);
      console.log("home beforeUpdate");
    },
    updated() {
      console.log(this.$refs.title.innerHTML);
      console.log("home updated");
    },
  };
</script>

<style scoped></style>

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---