vue生命周期钩子
=生命周期函数
=生命周期事件
与EL DATA METHODS 平级
创建阶段的4个生命周期
beforeCreate(){//表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的
//一些生命周期函数和默认的事件，其它的东西都未创建
//在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
/*console.log(this.msg)
this.show()*/
//this.msg undefined
/*cannot find prototype show*/
},
created(){//第二个生命周期函数
console.log(this.msg);
this.show();
//在created中， data和methods都已经初始化好了
//如果要调用methods中的方法 或者 data中的数据 最早只能在created中操作
},
beforeMount(){//第三个生命周期函数 表示模板已经加载完成。但是还没有渲染到页面上
// console.log(document.getElementById("h3").innerText)// {{msg}}
//在beforeMount执行的时候，页面中的元素。还没有真正替换过来。值是之前写的一些模板字符串
},
mounted(){//第四个生命周期函数 表示 内存中的模板已经真是的挂载到了页面中，用户
//已经可以看到渲染之后的页面
console.log(document.getElementById("h3").innerText)
}
如果要通过某些插件 操作页面上的DOM节点 最早要在mounted中进行
只要执行忘了mounted 就表示整个VUE实例 已经初始化完毕
组件运行阶段的生命周期函数
beforeUpadate(){}
upadated(){}
beforeMount(){//第三个生命周期函数 表示模板已经加载完成。但是还没有渲染到页面上
// console.log(document.getElementById("h3").innerText)// {{msg}}
//在beforeMount执行的时候，页面中的元素。还没有真正替换过来。值是之前写的一些模板字符串
},
mounted(){//第四个生命周期函数 表示 内存中的模板已经真是的挂载到了页面中，用户
//已经可以看到渲染之后的页面
// console.log(document.getElementById("h3").innerText)
},
这两事件 会根据 data数据的改变 ，有选择性的触发 0 次 到多次
当数据进行更新的时候， 先根据data中最新的数据， 在内存中。重新渲染出一份最新的 内存DOM树 重新渲染到真实的页面中去， 这时候，就完成了数据 从 data（model层）->view （视图层） 的变化
当新的DOM树更新完成之后，还没有渲染到页面之前 会执行beforeUpdate钩子函数
当真实页面渲染成功之后，就会执行updated函数
当执行beforeDestroy的时候 Vue实例已经从运行阶段 进行到了销毁阶段，但是实例身上所有的methods，以及过滤器 指令... 都处于可用状态 此时 还没有真正执行销毁的过程
当执行到destroyed函数的时候，组件已经完全被销毁了 此时， 组件中所有的数据，方法，指令， 过滤器，所有的东西都已经不可用了
beforeDestroy(){}
destroyed(){}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{msg}}</h3>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:'OK'
},
methods:{
show(){
console.log("执行了show方法");
}
},
beforeCreate(){//表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上，只有默认的
//一些生命周期函数和默认的事件，其它的东西都未创建
//在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
/*console.log(this.msg)
this.show()*/
//this.msg undefined
/*cannot find prototype show*/
},
created(){//第二个生命周期函数
// console.log(this.msg);
// this.show();
//在created中， data和methods都已经初始化好了
//如果要调用methods中的方法 或者 data中的数据 最早只能在created中操作
},
beforeMount(){//第三个生命周期函数 表示模板已经加载完成。但是还没有渲染到页面上
// console.log(document.getElementById("h3").innerText)// {{msg}}
//在beforeMount执行的时候，页面中的元素。还没有真正替换过来。值是之前写的一些模板字符串
},
mounted(){//第四个生命周期函数 表示 内存中的模板已经真是的挂载到了页面中，用户
//已经可以看到渲染之后的页面
// console.log(document.getElementById("h3").innerText)
},
beforeUpdate(){//这时候， 表示 我们的界面还有没有更新【数据 已经被更新了】
// console.log(document.getElementById("h3").innerText)
// console.log('data中的数据是'+this.msg)//当执行beforeUpdate的时候 页面中显示的
//数据还是旧的，此时 Data数据是最新的 页面尚未和最新的数据保持同步
},
updated(){
console.log(document.getElementById("h3").innerText)
console.log('data中的数据是'+this.msg)
}
})
</script>
</html>
网友评论