vue生命周期有几个

2024年9月23日 互联网

Vue的生命周期有8个阶段，它们分别是：

vue生命周期有几个
（图片来源网络，侵删）

1、beforeCreate

2、created

3、beforeMount

4、mounted

5、beforeUpdate

6、updated

7、beforeDestroy

8、destroyed

下面是详细的解释和示例代码：

Vue生命周期

Vue实例有一个完整的生命周期，从创建到销毁，在每个阶段，Vue都会触发一些特定的事件，我们可以在这些事件中执行自定义的逻辑。

1. beforeCreate

在实例初始化之后，数据观测 (data observer) 和事件/监听器 (event/watcher) 尚未被初始化。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function () {
    console.log('beforeCreate');
  }
});

2. created

在实例创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调，挂载阶段还没开始，$el属性目前不可见。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    console.log('created');
  }
});

3. beforeMount

在挂载开始之前被调用：相关的render函数首次被调用，该钩子在服务器端渲染期间不会被调用。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeMount: function () {
    console.log('beforeMount');
  }
});

4. mounted

el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子，如果实例被挂载到一个文档内的元素上，当mounted被调用时vm.$el也在文档内，该钩子在服务器端渲染期间不会被调用。

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function () {
    console.log('mounted');
  }
});

5. beforeUpdate

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，你可以在这个钩子中进一步改变状态，这不会触发附加的重渲染过程，该钩子在服务器端渲染期间不会被调用。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeUpdate: function () {
    console.log('beforeUpdate');
  }
});

6. updated

由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用，该钩子在服务器端渲染期间不会被调用。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  updated: function () {
    console.log('updated');
  }
});

7. beforeDestroy

实例销毁之前调用，在这一步，实例仍然完全可用，这意味着实例的所有属性和状态都是可用的，该钩子在服务器端渲染期间不会被调用。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeDestroy: function () {
    console.log('beforeDestroy');
  }
});

8. destroyed

Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不会被调用。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  destroyed: function () {
    console.log('destroyed');
  }
});
最新文章