Vue生命周期

1、前言

现在工作中用Vue也很多了，是时候总结一下自己使用Vue的心得了。其实，我并不知道从何开始去总结vue，因为vue的官方文档，可谓“中文开发者”的福音，实在是太全了！所以下面我还是从基本的东西说起——生命周期。

2、生命周期

通过之前的分享相信大家已经对Vue有了大概的了解，它是通过数据响应的，那么data中的数据一旦发生变化，页面的数据也随之变化，现在该谈谈生命周期的话题了。这下面的这幅图中，可以清晰地看到vue组件地从构造函数建立到销毁的全过程。

vue生命周期.png

• beforeCreate
  在实例初始化之后，数据观测（Data Observer）和event/watcher事件配置之前被调用。
• create
  实例已经创建完成之后被调用。在这一步，Dom挂载阶段还没开始。
• beforeMount
  在挂载开始之前被调用
• mounted
  挂载到实例上去之后调用该钩子函数
• beforeUpdate
  数据更新时调用
• beforeDestroy
  实例销毁之前调用
• destroyed
  Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

下面我用代码展示一下：

new Vue({
  el: '#app',
  beforeCreate: function () {
    console.log('调用了beforeCreat钩子函数')
  },
  created: function () {
    console.log('调用了created钩子函数')
  },
  beforeMount: function () {
    console.log('调用了beforeMount钩子函数')
  },
  mounted: function () {
    console.log('调用了mounted钩子函数')
  }
})

效果如下

demo.png

总结

关于vue的东西，其实还有很多。它的优越之处在于总结了angular1.0的失败之处，综合了react的优雅之点。同时，为前端程序员提供了良好的开发环境。