VUE2生命周期代码详解

父组件

<template>
  <div>
    <mark>生命周期</mark>
    <button @click="handleSwitch">切换</button>
    <Son v-if="is" :abc="abc" @getChange="getChange"></Son>
  </div>
</template>
<script>
//引入子组件
import Son from "./Son";
export default {
  components: { Son },
  data() {
    return {
      is: true,
      abc: "我是父级的数据",
    };
  },
  methods: {
    getChange(value) {
      this.abc = value;
    },
    handleSwitch() {
      this.is = !this.is;
    },
  },
};
</script>

子组件

<template>
  <div>
    {{ abc }}
    <button @click="$emit('getChange', msg)">点击更新数据</button>
  </div>
</template>
<script>
export default {
  props: ["abc"],
  data() {
    return {
      msg: "数据更新成功",
    };
  },
  //创建阶段
  beforeCreate() {
    console.log("1.创建前---beforeCreate");
  },
  created() {
    console.log("2.创建后---created");
  },
  //挂载阶段
  beforeMount() {
    //骨架屏--技术
    console.log("3.挂载前--beforeMount");
  },
  //当页面加载完成，发起一个请求，写这里。
  mounted() {
    //挂载成功相当于window.onload
    console.log("4.挂载成功---mounted");
  },
  //更新阶段:当data或props数据修改时触发
  beforeUpdate() {
    console.log("5.更新前---beforeUpdate");
  },
  updated() {
    console.log("6.更新后---updated");
  },
  //卸载阶段-销毁
  beforeDestroy() {
    console.log("7.卸载前---beforeDestroy");
  },
  destroyed() {
    console.log("8.卸载完成---destroyed");
  },
};
</script>

打开页面，触发beforeCreate、created、beforeMount、mounted，点击触发更新，更新数据，触发beforeUpdate、updated，点击切换，销毁组件，触发beforeDestroy、destroyed。