Vue生命周期

一.个人理解对Vue的生命周期的理解

1.1: beforeCreate: 创建阶段的第一个生命周期函数,组件的Props/data/methods尚未被创建,都是出于不可用的状态

<template>
  <div class="test-box">
    <h3>Test.vue组件</h3>

    <!-- 测试demo的渲染 -->
    <h3 id="myh3">myh3</h3>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      message: "hello,Vue.js",
    };
  },
  methods: {
    show() {
      console.log("调用了Test组建的Show方法!");
    },
  },
  // 1.创建阶段的第一个生命周期函数,组件的Props/data/methods尚未被创建,都是出于不可用的状态
  beforeCreate() {
    // 这个地方调用是会报警告的,他是不可用的
    this.show(); //  Error in beforeCreate hook: "TypeError: this.show is not a function"
    console.log(this.message); // undefined 也是不可用的
  },
};
</script>

<style lang="less" scoped>
.test-box {
  background-color: pink;
  height: 200px;
}
</style>

实际截图

image.png

1.2 created:2.1 经常在这个里面调用methods中的方法,请求服务器数据,并把数据转存到data中,然后渲染到页面

2. 组件的Props/data/methods已创建好,都是出于可用的状态,但是组件的模板结构尚未生成,就是那些标签没有渲染出来
<template>
  <div class="test-box">
    <h3>Test.vue组件</h3>

    <!-- 测试demo的渲染 -->
    <h3 id="myh3">myh3</h3>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      message: "hello,Vue.js",
    };
  },
  methods: {
    show() {
      console.log("调用了Test组建的Show方法!");
    },
  },
  // 1.创建阶段的第一个生命周期函数,组件的Props/data/methods尚未被创建,都是出于不可用的状态
  beforeCreate() {
    // 这个地方调用是会报警告的,他是不可用的
    console.log(this.message); // undefined 也是不可用的
    this.show(); //  Error in beforeCreate hook: "TypeError: this.show is not a function"
  },

  // 2. 组件的Props/data/methods已创建好,都是出于可用的状态,但是组件的模板结构尚未生成,就是那些标签没有渲染出来
  // 2.1 经常在这个里面调用methods中的方法,请求服务器数据,并把数据转存到data中,然后渲染到页面
  created() {
    this.show(); // 调用了Test组建的Show方法!
    console.log(this.message); // hello,Vue.js
    /**以上的都是组件的Props/data/methods已创建好,都是出于可用的状态**/ 

    /**但是组件的模板结构尚未生成,就是那些标签没有渲染出来**/ 
    const DEMOH3 = document.querySelector('#myh3')
    console.log(DEMOH3); // null
  },
};
</script>

<style lang="less" scoped>
.test-box {
  background-color: pink;
  height: 200px;
}
</style>

实际截图

image.png

beforeCreate 和 created 函数

image.png

以上的两个生命周期都没有生成DOM

二.以下的生命周期生成了DOM

2.1 beforMount: 将要把内存中的HTML结构,成功的渲染到浏览器中,此时浏览器中还没有当前组件的DOM结构

beforeMount() {
    const DEMOH3 = document.querySelector("#myh3");
    console.log(DEMOH3);
  },

实际截图:

image.png

2.2 Mount:将要把内存中的HTML结构,成功的渲染到浏览器中,此时浏览器中已然包含当前组件的DOM结构

 // mounted:将要把内存中的HTML结构,成功的渲染到浏览器中,此时浏览器中已然包含当前组件的DOM结构
  mounted() {
    const DEMOH3 = document.querySelector("#myh3");
    console.log(DEMOH3);
  },

实际截图

image.png

beforeMount 和mounted

image.png

三.切记如果要操作当前页面的DOM 最早最早要在mounted中去操作,mounted以前的都是获取不成功的

四.组件的运行阶段 (也就是交互阶段,页面变化阶段)beforeUpdate 和 updated

实际截图

image.png

1. beforUpdate的改变全过程

<template>
  <div class="test-box">
    <h3>Test.vue组件</h3>

    <!-- 测试demo的渲染 -->
    <h3 id="myh3">myh3</h3>

    <!-- 测试 -->
    <p>message的值是: {{ message }}</p>
    <button @click="btnAddMessage">修改message的值</button>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      message: "hello,Vue.js",
    };
  },
  methods: {
    show() {
      console.log("调用了Test组建的Show方法!");
    },

    btnAddMessage() {
      this.message += "~";
    },
  },
 // beforeUpdate:将要根据变化过后,最新的数据,重新渲染组件的模板结构,此时他的值还是旧值
  beforeUpdate() {
    console.log(this.message); // 获取到最新改变的值
    console.log('beforeUpdate触发了');
    const PPPP = document.querySelector("#pppp")
    console.log(PPPP.innerHTML); // 62行的打印是获取到了最新的更改状态值,但是标签的内容信息还是没有改变的
  },
  // updated: 已经根据最新的数据,完成看组件DOM结构的重新渲染
  // 当数据变化之后,为了能够操作到最新的DOM结构,必须把代码写到updated生命周期函数中
  updated() {},
};
</script>

<style lang="less" scoped>
.test-box {
  background-color: pink;
  height: 200px;
}
</style>
#### 切记:当数据变化之后,为了能够操作到最新的DOM结构,必须把代码写到updated生命周期函数中

1.2.实际截图:

image.png

五.beforeCreate,created,beforeMount,mounted,beforeUpdate,updated的详细代码如下:

<template>
  <div class="test-box">
    <h3>Test.vue组件</h3>

    <!-- 测试demo的渲染 -->
    <h3 id="myh3">myh3</h3>

    <!-- 测试 -->
    <p id="pppp">message的值是: {{ message }}</p>
    <button @click="btnAddMessage">修改message的值</button>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      message: "hello,Vue.js",
    };
  },
  methods: {
    show() {
      console.log("调用了Test组建的Show方法!");
    },

    btnAddMessage() {
      this.message += "~";
    },
  },
  // 1.创建阶段的第一个生命周期函数,组件的Props/data/methods尚未被创建,都是出于不可用的状态
  beforeCreate() {
    // 这个地方调用是会报警告的,他是不可用的
    console.log(this.message); // undefined 也是不可用的
    this.show(); //  Error in beforeCreate hook: "TypeError: this.show is not a function"
  },

  // 2. 组件的Props/data/methods已创建好,都是出于可用的状态,但是组件的模板结构尚未生成,就是那些标签没有渲染出来
  // 2.1 经常在这个里面调用methods中的方法,请求服务器数据,并把数据转存到data中,然后渲染到页面
  created() {
    this.show(); // 调用了Test组建的Show方法!
    console.log(this.message); // hello,Vue.js
    /**以上的都是组件的Props/data/methods已创建好,都是出于可用的状态**/

    /**但是组件的模板结构尚未生成,就是那些标签没有渲染出来**/
    // const DEMOH3 = document.querySelector("#myh3");
    // console.log(DEMOH3); // null
  },

  // beforeMount:将要把内存中的HTML结构,成功的渲染到浏览器中,此时浏览器中还没有当前组件的DOM结构
  beforeMount() {
    const DEMOH3 = document.querySelector("#myh3");
    console.log(DEMOH3);
  },
  // mounted:将要把内存中的HTML结构,成功的渲染到浏览器中,此时浏览器中已然包含当前组件的DOM结构
  mounted() {
    const DEMOH3 = document.querySelector("#myh3");
    console.log(DEMOH3);
  },
  // beforeUpdate:将要根据变化过后,最新的数据,重新渲染组件的模板结构,此时他的值还是旧值
  beforeUpdate() {
    console.log(this.message); // 获取到最新改变的值
    console.log('beforeUpdate触发了');
    const PPPP = document.querySelector("#pppp")
    console.log(PPPP.innerHTML); // 62行的打印是获取到了最新的更改状态值,但是标签的内容信息还是没有改变的
  },
  // updated: 已经根据最新的数据,完成看组件DOM结构的重新渲染
  // 当数据变化之后,为了能够操作到最新的DOM结构,必须把代码写到updated生命周期函数中
  updated() {},
};
</script>

<style lang="less" scoped>
.test-box {
  background-color: pink;
  height: 200px;
}
</style>

六 .beforeDestroy和 destroyed

image.png