1.beforeCreate:
vue实例中的el,data,data中的message都为undefined。
2.created:
el还是undefined,而数据已经与data中的属性进行绑定(放在data中属性当值发生改变的同时,视图也会发生变化),在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。
3.beforeMount:
载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Bom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。
4.mounted:
载入后html已经渲染(ajax请求可以放在这个函数中),把vue实例中的data里的message挂载到BOM节点中去。
5.beforeUpdate:
更新前状态(view层的数据变化前,不是data中的数据改变前),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发。
6.updated:
数据已经更改完成,dom也重新render完成。
7.beforeDestroy:
销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)。
8.destroyed:
销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件。
生命周期总结
beforecreate : 可以在这加个loading事件 ,页面加载的loading效果;
created :在这结束页面加载loading;
beforeMount:这里发起后台API请求获取数据的loading效果,在所有请求结束后,结束loading效果;
mounted : 在这里计算后台获取到的数据,在页面渲染到前端前,对数据进行简单计算处理,例如日期格式化,几个字段相加等,配合路由钩子做一些事情;
beforeDestroy: 你确认删除XX吗?
destroyed :当前组件已被删除,清空相关内容;
在 methods 属性里面定义 用户提交表单的方法,加入用户交互等待的loading效果。
另外Vue页面中常用的几个属性,通过修改这些属性的值,或者赋值,能完成页面的大部分功能。
el属性 :用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
data属性:用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
template属性:用来设置模板,会替换页面元素,包括占位符。
methods属性:放置页面中的业务逻辑,js方法一般都放置在methods中;
render属性:创建真正的Virtual Dom
computed属性:用来计算属性
watch属性:watch:function(new,old){},监听data中数据的变化,两个参数,一个返回新值,一个返回旧值;