生命周期 のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• +Vue+生命周期 へ行く。
  • 1 (2022-05-11 (水) 19:14:08)
  • 2 (2022-05-11 (水) 19:15:20)

Vue

※前提条件：本情報はVue 2.0を基づいて説明してる

钩子函数 †[edit]

钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

示例 †[edit]

<template>
  <div>
    <h1>1、生命周期</h1>
    <p>控制台打印结果：</p>
    <p id="myMsg">{{ msg }}</p>

    <ul id="myArr">
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="add">末尾加值</button>
  </div>
</template>

<script>
export default {
  // 数据对象
  data() {
    return {
      msg: "你好世界！！",
      arr: [1, 2, 3],
      timer: "",
    };
  },
  // new Vue()之后执行 vue内部给实例添加了一些属性和方法
  // data和methods之前执行
  beforeCreate() {
    console.log("beforeCreate函数执行了");
    // 此时获取不到data中的变量值
    console.log(this.msg);
  },

  methods: {
    add() {
      this.arr.push(Math.floor(Math.random() * 10));
    },
  },
  // data和methods之后执行
  created() {
    console.log("create函数执行了");
    // 此时可以获取到data中的变量值
    console.log(this.msg);

    this.timer = setInterval(() => {
      console.log("哈哈哈哈！");
    }, 1000);
  },

  /**
   * 2、挂载
   */
  //真实DOM挂载之前
  // 使用场景：预处理data，不会触发update钩子函数
  beforeMount() {
    console.log("beforeMount函数执行了----此时获取不到真实DOM");
    console.log(document.getElementById("myMsg"));

    // 重新改变data中的值
    this.msg = "hello,world";
  },

  //真实DOM挂载之后
  // 此处可以获取到真实的DOM
  mounted() {
    console.log("beforeMount函数执行了----此时可以获取到真实DOM");
    console.log(document.getElementById("myMsg"));
  },

  /**
   * 3、更新
   */
  //更新之前
  beforeUpdate() {
    console.log("beforeUpdate函数执行了-----此时获取不到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  // 更新之后
  // 场景：获取更新真实DOM之后
  updated() {
    console.log("update函数执行了-----此时可以获取到更新的真实DOM");
    console.log(document.querySelectorAll("#myArr>li"));
  },

  /**
   * 4、销毁
   */
  beforeDestroy() {
    console.log("beforeDestroy函数执行了");
    clearInterval(this.timer)
  },

  destroyed() {
    console.log("destroyed函数执行了");
  },
};
</script>

<style>
</style>


 -------App.vue-----------------
<template>
  <div>
    <Life v-if="isShow"></Life>
    <button @click="isShow = false">销毁组件</button>
  </div>
</template>

<script>
import Life from "@/components/Life";
export default {
  data() {
    return {
      isShow: true,
    };
  },
  components: {
    Life,
  },
};
</script>

<style>
</style>

コメント：

お名前:

(画像の文字列を入力して下さい)