Vue2-生命周期

Vue2-生命周期

以下是 Vue 2 生命周期的详细说明和示例。

• beforeCreate

  • 在实例被创建之前调用。此时实例的属性和方法都不能被访问。

new Vue({
  beforeCreate: function() {
    // 在此阶段不可以访问实例的属性和方法
    console.log("beforeCreate");
  }
});

• created

  • 在实例创建后调用。此时实例的属性和方法已经被创建，但还未挂载到 DOM 上。

new Vue({
  created: function() {
    // 可以访问实例的属性和方法
    console.log("created");
  }
});

• beforeMount

  • 在实例被挂载到 DOM 前调用。

new Vue({
  beforeMount: function() {
    // 此时实例的模板已经编译成了渲染函数
    console.log("beforeMount");
  }
});

• mounted

  • 实例被挂载到 DOM 后调用。

new Vue({
  mounted: function() {
    // 可以访问实例的 DOM 元素
    console.log("mounted");
  }
});

• beforeUpdate

  • 在实例数据更新前调用。

new Vue({
  beforeUpdate: function() {
    console.log("beforeUpdate");
  }
});

• updated

  • 在实例数据更新后调用。

new Vue({
  updated: function() {
    console.log("updated");
  }
});

• beforeDestroy

  • 在实例销毁前调用。

new Vue({
  beforeDestroy: function() {
    // 可以执行一些清理工作，如清除定时器或取消订阅
    console.log("beforeDestroy");
  }
});

• destroyed

  • 在实例销毁后调用。

new Vue({
  destroyed: function() {
    console.log("destroyed");
  }
});

示例

下面是一个完整的示例，展示了 Vue 2 生命周期的各个阶段。

<div id="app">
  <p>{{message}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    beforeCreate: function() {
      console.log("beforeCreate");
    },
    created: function() {
      console.log("created");
    },
    beforeMount: function() {
      console.log("beforeMount");
    },
    mounted: function() {
      console.log("mounted");
    },
    beforeUpdate: function() {
      console.log("beforeUpdate");
    },
    updated: function() {
      console.log("updated");
    },
    beforeDestroy: function() {
      console.log("beforeDestroy");
    },
    destroyed: function() {
      console.log("destroyed");
    }
  })
</script>

在这个示例中，Vue 实例的生命周期被完整地输出到控制台中。打开浏览器的开发者工具，查看控制台输出