Home Vue

# 1.beforeCreate、Created、beforeMount、mounted

# App

vue
// App.vue
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
};
</script>
<style scoped></style>
# Home


vue
<template>
  <div>
    <h2 ref="title">{{ message }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello Home",
    };
  },
  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>
参考结果：


life-cycle_default


# 2.beforeUpdate、updated


# App


vue
// App.vue
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
};
</script>
<style scoped></style>
# Home


vue
<template>
  <div>
    <h2 ref="title">message:{{ 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");
    console.log("------------");
  },
  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>
参考结果：


life-cycle_beforeCreate-created


# 2.beforeUnmount、unmounted


# App


vue
// 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
// Home.vue
<template>
  <div>
    <h2 ref="title">message:{{ 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");
    console.log("------------");
  },
  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>
参考结果：


life-cycle_beforeUnmount-unmounted


# 3. 总结


    

  • 页面渲染默认会执行 beforeCreate -> created -> beforeMount -> mounted
    • 

  • 数据更新会执行 beforeUpdate -> updated
    • 

  • 数据卸载会执行 beforeUnmount -> unmounted
    • 

  • beforeUpdate : 数据还未更新执行的回调函数
    • 

  • updated：数据已经更新完执行的回调函数
    • 

  • 注意 beforeUnmount 与 unmounted 在 keep-alive 不会生效，这时就会用到 onActivated 和 deactivated 了！
    • 

  • 用 coderwhy 老师上课资料展示：
    • 



life-cycle