vue生命周期有几个

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

创新互联，为您提供重庆网站建设、重庆网站制作、网站营销推广、网站开发设计，对服务资质代办等多个行业拥有丰富的网站建设及推广经验。创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。与客户共同发展进步，是我们永远的责任！

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也在文档内，该钩子在服务器端渲染期间不会被调用。


  {{ message }}

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');
  }
});

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容