关于Vue的八个生命周期钩子
测试和解释写在以下代码中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p id="p">{{msg}}</p>
<input type="button" value="change msg" @click="msg='yes'">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'yesok'
},
methods:{
show(){
console.log('执行了show方法')
}
},
beforeCreate(){//表示实例完全被创建出来之前，会执行它。
//在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化
},
created(){
//在created生命周期函数执行的时候，data和methods中的数据已经被初始化
//如果调用methods中的方法，或者是操作data的数据，最早只能在created中操作
console.log(this.msg)
this.show()
},
beforeMount(){//表示模版已经在内存中编译完成了，但是尚未把模板渲染到页面中
console.log(document.getElementById('app').innerText)
//在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前的一些模板字符串
},
mounted(){//
console.log(document.getElementById('app').innerText)
/*mounted是实例创建期间最后的一个生命周期函数，当执行完mounted就表示，Vue实例已经被完全创建
好了，此时如果没有其它操作的话，这个实例就静静地躺在内存中，一动不动。*/
//如果要通过某些插件操作页面上的DOM节点了，最早要在mounted中进行
},
//接下来是运行中的两个事件,beforeUpdate和updated这两个事件，会根据data数据的改变，有选择性的触发0次到多次。
beforeUpdate(){//表示我们的页面还没有被更新，但是数据已经被更新了
console.log('页面上元素的内容是：'+document.getElementById('app').innerText)
console.log('data中msg数据是：'+this.msg)
//当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步。
},
updated(){
console.log('页面上元素的内容是：'+document.getElementById('app').innerText)
console.log('data中msg数据是：'+this.msg)
//updated事件执行的时候，页面(View层)和data数据(Model层)已经保持同步了，都是最新的。
},
//Vue实例的销毁阶段
beforeDestroy(){
},
destroyed(){//当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中所有的数据、方法、指令、过滤器......都已经不可用了。
}
})
</script>
</body>
</html>
原创文章 6
获赞 1
访问量 129