vue 的实例生命周期

简介: vue 的实例生命周期

Vue.js 的实例生命周期指的是 Vue 实例在创建、更新和销毁过程中的一系列事件和钩子函数,允许在不同阶段执行自定义操作。Vue 实例的生命周期可以分为以下阶段:

创建(Creation):

beforeCreate:在实例初始化之后,数据观测和事件配置之前调用。

created:实例已经创建完成,数据观测和事件配置都已完成,但虚拟 DOM 尚未创建,不能访问 $el。

挂载(Mounting):

beforeMount:在挂载开始之前被调用,可以访问 $el。

mounted:在实例被挂载后调用,可以访问 $el,此时实例已经成为 DOM 树上的一个节点。

更新(Updating):

beforeUpdate:在数据更新时调用,但在 DOM 重新渲染之前。

updated:在数据更新并且 DOM 重新渲染后调用。

销毁(Destroying):

beforeDestroy:在实例销毁之前调用,可以进行一些清理工作。

destroyed:在实例销毁后调用,可以访问实例的数据,但不再能访问 $el。

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate: The message is ' + this.message);
  },
  created() {
    console.log('created: The message is ' + this.message);
  },
  beforeMount() {
    console.log('beforeMount: The message is ' + this.message);
  },
  mounted() {
    console.log('mounted: The message is ' + this.message);
  },
  beforeUpdate() {
    console.log('beforeUpdate: The message is ' + this.message);
  },
  updated() {
    console.log('updated: The message is ' + this.message);
  },
  beforeDestroy() {
    console.log('beforeDestroy: The message is ' + this.message);
  },
  destroyed() {
    console.log('destroyed: The message is ' + this.message);
  },
  methods: {
    changeMessage() {
      this.message = 'Vue is awesome!';
    },
    destroyInstance() {
      this.$destroy();
    }
  }
});
相关文章
|
5天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
5天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
5天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
5天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
5天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
5天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
5天前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
JavaScript
vue 踩坑 01 ->两种创建vue实例的区别
第一个例子 {{msg}} var app = new Vue({ el: '#app', data: { m...
921 0
|
9天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
13 0
|
9天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
15 0