+Vue+生命周期の変更点

追加された行はこの色です。
削除された行はこの色です。
+Vue+生命周期へ行く。
+Vue+生命周期の差分を削除
#author("2022-05-12T09:10:15+08:00","default:Admin","Admin")
#author("2022-05-12T09:10:36+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本情報はVue 2.0を基づいて説明してる};

#contents

* 钩子函数 [#h319ed7c]

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

|阶段|方法名|方法名|
|初始化|beforeCreate|created|
|挂载|beforeMount|mounted|
|更新|beforeUpdate|updated|
|销毁|beforeDestroy|destroyed|

** 初始化阶段 [#q2775286]

触发条件是自动的

*** beforeCreate [#ue638fcc]

- 组件即将创建，进行组件事件和生命周期的初始化
- 项目中一般不使用
- 有的开发者也会在这里进行数据请求

*** created [#x9a413cd]

- 组件创建完成
- 项目中：
-- 异步请求接口数据
-- 数据修改

*** beforeMount [#ic05b07c]

- 组件即将挂载
- 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
- 项目中：
-- 异步请求接口数据
-- 数据修改

*** mounted [#c9130908]

- 组件挂载结束
- 使用真实DOM替换VDOM
- 项目中
-- 异步请求接口数据
-- 数据修改
-- 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )

** 运行中阶段 [#fc042592]

触发条件是： 当data选项中的数据发生改变时

*** beforeUpdate [#b6611c04]

内部操作 ： vdom生成和diff的对比

*** updated [#o05cfd0f]

Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化

** 销毁阶段 [#p359afec]

*** beforeDestory [#kd51f621]

组件即将销毁，准备调用 $destroy() 方法

*** destoryed [#z223379c]

组件销毁结束

这两个钩子函数没有什么去别，功能很相似


* 示例 [#ydb3ee80]

#codeprettify{{
<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中的变量值
    // DOM  取不到
    console.log(this.msg);
  },

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

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

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

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

  //真实DOM挂载之后
  // 此处可以获取到真实的DOM
  mounted() {
    // data  data选项中的数据获到了
    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>
}}


#hr();
コメント：
- dddd -- [[df]] &new{2022-05-12 (木) 10:10:15};

#comment_kcaptcha
生命周期 の変更点

生命周期の変更点
