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>