vue生命周期

孙景荣

已于 2023-02-01 14:50:02 修改

阅读量86

点赞数 1

分类专栏： vue2 文章标签： vue.js javascript 前端 html css

于 2022-10-07 11:26:33 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127192378

版权

vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、生命周期

beforeCreate 组件实例创建前阶段,该阶段组件还没有创建好
created vue实例已经创建完成
beforeMount 挂载前
mounted 已经挂载到实例上
beforeUpdate 初始化不执行, data中的数据更新的时候执行,虚拟dom已经更新,真实dom还没更新
updated 虚拟dom已经替换掉了页面中的真实dom
beforeDestroy 组件实例销毁前
destroyed 组件实例销毁后

二、代码演示

下面代码演示了生命周期的执行时机

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <button @click="editMsg">修改数据</button>
      <button @click="destroyFn">销毁当前的组件实例</button>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "我是数据",
        },
        methods: {
          editMsg() {
            this.msg = "我修改了";
          },
          destroyFn() {
            this.$destroy();
          },
        },
        beforeCreate() {
          console.log(this.msg);
        },
        created() {
          console.log(this.msg);
        },
        beforeMount() {
          console.log(document.querySelector("p"));
        },
        mounted() {
          console.log(document.querySelector("p"));
        },
        beforeUpdate() {
          console.log(document.querySelector("p").innerHTML);
        },
        updated() {
          console.log(document.querySelector("p").innerHTML);
        },
        beforeDestroy() {
          console.log("beforedestory");
        },
        destroyed() {
          console.log("destoryed");
        },
      });
    </script>
  </body>
</html>