vue系列文章（18）vue生命周期

vue文档上面提供的生命周期图示很详细，具体看下面

 

生命周期中提供的一系列钩子函数非常重要，包含有：beforeCreate() ,created(),beforeMount(),mounted(),beforeUpdate(),updated(), beforeDestroy(),desctroyed(),

下面对上面的一些钩子函数采用我们前面案例中的header.vue进行代码演示。

在header.vue中加入一些钩子函数进行演示。

 

beforeCreate: function() {
  	alert("组件实例化之前执行的函数");
  },
  created: function() {
  	alert("组件实例化完毕，但页面还未显示");
  },
  beforeMount: function() {
  	alert("组件挂载前，页面仍未展示，但虚拟dom已经配置完");
  },
  mounted: function() {
  	alert("组件挂载后，此方法执行后页面显示.");
  },
  beforeUpdate: function() {
  	alert("组件更新前，页面仍未更新。但虚拟dom已经配置");
  },
  updated: function(){
  	alert("组件更新，此方法执行后，页面显示");
  },
  beforeDestroy: function(){
  	alert("组件销毁前");
  },
  destroyed: function(){
  	alert("组件已销毁");
  }

可以刷新自己的网页，根据alert的提示，看看vue的生命周期执行的事件。

   Vue系列文章目录 

1. vue系列文章（1）：对象绑定，属性绑定
2. Vue系列文章（2）事件绑定，鼠标点击事件
3. vue系列文章（3）：事件修饰符
4. Vue系列文章（4）键盘事件及键盘修饰符
5. vue系列文章（5）双向数据绑定
6. vue系列文章（6）计算属性computed
7. vue系列文章（7）动态CSS类型绑定
8. vue系列文章（8）条件渲染
9. vue系列文章（9）v-for条件循环
10. vue系列文章（10）vue实战项目demo
11. vue系列文章(11)：初始化多个实例对象
12. vue系列文章（12）初始组件的应用
13. Vue系列文章（13）vue cli脚手架
14. vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
15. vue系列文章（15）属性传值props
16. vue系列文章（16）传值和传引用的类型和区别
17. vue系列文章（17）利用事件传递将子组件值传递给父组件
18. vue系列文章（18）vue生命周期
19. vue系列文章（19）vue路由配置
20. vue系列文章（20） vue网络请求vue-resource

 如果上面文章对你有用，打赏下我吧@*@