vue笔记之生命周期

<div id="app">
<input type="button" name="" value="修改msg" @click="msg='no'">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm = new Vue ({
el:'#app',
data:{
msg: 'ok'
},
methods: {
show () {
console.log("执行了show方法")
}
},

beforeCreate () {//第一个，表示实例完全被创建出来之前会执行它
// console.log(this.msg)
// this.show
// 在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化
},
created () {//第二个生命周期
// console.log(this.msg)
// this.show()
// 在created中，data和methods中的数据都已经初始化
// 如果要调用method中的方法，或者操作data数据时最早只能在created中操作
},
beforeMount () {//这是遇到的第三个生命周期函数表示模版已经在内存中编辑完成了，但是尚未把模版渲染到页面
// 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模版字符串
},
mounted() { //表示内存中的模版，已经真是的挂载到了页面中，用户已经可以看到渲染好的页面
//mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在内存中，只要执行完了mounted，就表示整个Vue实例已经初始化完毕了
//此时组件进入运行阶段
},
// 组件运行阶段的生命周期函数只有两个：beforeUpdate

// 组件运行中的两个事件
beforeUpdate () {//界面还没有被更新,页面中的数据还没被更新，data数据被更新了
console.log('界面上的元素内容：' + document.getElementById('h3').innerText)
console.log('data中的msg数据是：' + this.msg)

},
updated () {
// console.log('界面上的元素内容：' + document.getElementById('h3').innerText)
// 	console.log('data中的msg数据是：' + this.msg)
// 页面中的数据已经同步了
},
// 当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段，
// 当执行beforeDestroy的时候，实例身上所有的data和所有的methods，以及过滤器、指令都处于可用状态，此时，还没有真正执行销毁的过程
// 当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中所有的数据方法、指令、过滤器等都不可以使用了
});

</script>