第一节: 初始化
初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
vue实例中的el,data,data中的message都为undefined。
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
主要应用:调用数据,调用方法,调用异步函数
载入前(完成了data和el数据初始化),可是页面中的内容仍是vue中的占位符,data中的message信息没有被挂在到Bom节点中,在这里能够在渲染前最后一次更改数据的机会,不会触发其余的钩子函数,通常能够在这里作初始数据。这个阶段操作DOM是不奏效的。
载入后html已经渲染(ajax请求能够放在这个函数中),把vue实例中的data里的message挂载到BOM节点中去。
第二节: 更新状态
2.1 beforeUpdate
状态完成更新之前(data中数据已发生变化,view层数据变化之前),后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。
2.1 updated
数据已经更改完成,dom也从新render完成。
第三节: 销毁实例
Vm.$destroy():销毁后自定义事件会失效,但原生DOM事件依然有效。销毁后会调用下面两个钩子。
2.1 beforeDestroy
销毁前执行($destroy方法被调用的时候就会执行),通常在这里善后:清除计时器、清除非指令绑定的事件等等…’)。
2.2 destroyed
销毁后 (Dom元素存在,只是再也不受vue控制),卸载watcher,事件监听,子组件
第四节: 生命周期总结
常用的生命周期钩子:
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例:
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Documenttitle>
- <script src="../js/vue.js">script>
- head>
-
- <body>
-
- <div id="root">
- 计算器:{{num}}
- <br>
- <span>{{num2}}span>
- <button @click="add">点我+1button>
- div>
- <script>
- new Vue({
- el: "#root",
- data: {
- num: 0,
- num2:100,
- },
- methods: {
- add() {
- setInterval(() => {
- this.num++;
- }, 1000)
- }
- },
- // data,event事件调用之前调用,此时的data还未初始化
- // 创建之前 初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- // vue实例中的el,data,data中的message都为undefined。
- beforeCreate() {
- console.log("beforecreate", this.num);
- },
- // 实例已经创建,data,event都已经准备好,但是挂载还没未开始页面不显示
- // 创建完成 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),
- // 属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- // 主要应用:调用数据,调用方法,调用异步函数
- created() {
- console.log("created", this.num);
- },
- // 挂载 页面完成挂载后调用此钩子 载入后html已经渲染(ajax请求能够放在这个函数中),
- // 把vue实例中的data里的message挂载到BOM节点中去。
- mounted() {
- console.log("mounted", this.num);
- setInterval(() => {
- this.num++;
- }, 1000)
- },
- // 状态完成更新之前(data中数据已发生变化,view层数据变化之前),后vue的虚拟dom机制会从新构建虚拟dom
- // 与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。
- beforeUpdate() {
- console.log("beforUpdate", this.num);
- },
- // 数据已经更改完成,dom也从新render完成。
- updated() {
- console.log("updataed", this.num);
- },
- beforeDestroy() {
- console.log("beforeDestroy", this.num);
- },
- destroyed() {
- console.log('destroyed')
- },
- })
- script>
-
-
- body>
-
- html>