WEB前端
  1. Vue
    1. WEB前端 - Vue - 安装
    2. WEB前端 - Vue - webpack目录结构与第一个项目示例
    3. WEB前端 - Vue - 基础语法
    4. WEB前端 - Vue - 条件语句与循环语句
    5. WEB前端 - Vue - 函数与计算属性
    6. WEB前端 - Vue - 监听属性
    7. WEB前端 - Vue - 样式绑定
    8. WEB前端 - Vue - 表单
    9. WEB前端 - Vue - 组件详解
    10. WEB前端 - Vue - 路由
    11. WEB前端 - Vue - 生命周期钩子函数

WEB前端 - Vue - 生命周期钩子函数

程序员日记      2019-09-17

本章节我们将为大家介绍 Vue.js 各声明周期中的钩子函数。

官方生命周期图




钩子函数介绍

beforeCreate

vue实例中的el,data,data中的message都为undefined


created

el还是undefined,而数据已经与data中的属性进行绑定(放在data中属性当值发生改变的同时,视图也会发生变化),在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取


beforeMount

载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Bom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取


mounted

载入后html已经渲染(ajax请求可以放在这个函数中),把vue实例中的data里的message挂载到BOM节点中去


beforeUpdate

更新前状态(view层的数据变化前,不是data中的数据改变前),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染


updated

数据已经更改完成,dom也重新render完成


beforeDestroy

销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)


destroyed

销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件


总结

beforecreate : 可以在这加个loading事件

created :在这结束loading,还做一些初始数据的获取,实现函数自执行

mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情

beforeDestroy: 你确认删除XX吗?

destroyed :当前组件已被删除,清空相关内容


示例

<template>
  <div id="app">
    {{msg}}
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){ 
    return {
        msg:"hello world",
    };
  },
  beforecreate(){
    console.log('beforecreate');
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log('beforeMount');
  },
  mounted(){
    console.log('mounted');
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
  },
  beforeDestroy(){
    console.log('beforeDestroy');
  },
  destroyed(){
    console.log('destroyed');
  }
};
</script>