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

时间 2020-12-08

标签 javascript vue java app 函数 this code server 对象生命周期栏目 JavaScript 繁體版

原文原文链接

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>