Vue基础之生命周期函数[残缺版]！

Vue基础之生命周期函数[残缺版]！

为什么说是残缺版呢？! 因为有一些周期函数我并没有学到！所以是残缺版！

01 beforeCreate

//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。// 简单理解就是整个页面创建之前调用的生命周期!

02 created

 /* 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，
属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 */

03 beforeMount

//在挂载开始之前被调用：相关的渲染函数首次被调用

04 mounted

//el 被新创建的 vm.$el 替换, 挂载成功

05 beforeUpdate

//数据更新时调用
// 数据变化之前调用的一个函数!

06 updated

//组件 DOM 已经更新, 组件更新完毕

温馨提醒

// 生命周期需要写在new Vue 传递的这个对象内!以属性的方式进行声明!这个属性他是一个函数!在 Vue运行的每个阶段, 会调用以生命的周期函数!!
// 有一点需要注意, 就是生命周期函数是不能使用箭头函的!因为箭头函数没有this!

<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
			// 生命周期需要写在new Vue 传递的这个对象内!以属性的方式进行声明!这个属性他是一个函数!在 Vue运行的每个阶段, 会调用以生命的周期函数!!
				// 有一点需要注意, 就是生命周期函数是不能使用箭头函的!因为箭头函数没有this!
				var vm = new Vue({
					el: "#app",
					data: {
						msg: "hi vue",
					},
					//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
					// 简单理解就是整个页面创建之前调用的生命周期!
					beforeCreate: function() {
						console.log('beforeCreate');
					},
					/* 在实例创建完成后被立即调用。
					在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
					然而，挂载阶段还没开始，$el 属性目前不可见。 */
					created: function() {
						console.log('created');
					},
					//在挂载开始之前被调用：相关的渲染函数首次被调用
					beforeMount: function() {
						console.log('beforeMount');

					},
					//el 被新创建的 vm.$el 替换, 挂载成功	
					mounted: function() {
						console.log('mounted');

					},
					//数据更新时调用
					// 数据变化之前调用的一个函数!
					beforeUpdate: function() {
						console.log('beforeUpdate');

					},
					//组件 DOM 已经更新, 组件更新完毕 
					updated: function() {
						console.log('updated');

					}
				});
			setTimeout(function() {
				vm.msg = "change ......";
			}, 3000);
		</script>
	</body>
posted @ 2020-12-07 22:23  lvhanghmm  阅读(108)  评论(0)    收藏  举报