Vue实例-实现生命周期钩子 - xiaoxustudy

Vue官网： https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

生命周期钩子的API：https://cn.vuejs.org/v2/api/#选项-生命周期钩子

学习官网教程。纪录练习。

生命周期钩子需要写在new Vue()时传递的对象内，以属性的方式进行声明。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg: 'hi vue'
				},
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate: function(){
					console.log('beforeCreate');
				},
				/*在实例创建完成后被立即调用。
				在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
				然而，挂载阶段还没开始，$el property 目前尚不可用。*/
				created: function(){
					console.log('created');
				},
				//在挂在开始之前被调用，相关的渲染函数首次别调用
				beforeMount: function(){
					console.log('mounted');
				},
				//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>
</html>

运行代码：

三秒之后：

posted on 2020-06-29 15:36 xiaoxustudy 阅读(245) 评论(0) 收藏举报

刷新页面返回顶部