00vue实例的生命周期钩子函数

末蓝、 2022-05-30 03:38 185阅读 0赞

把以下代码进行运行，看过程，应该能够明白意思：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>		
    		<div id="app1">
    			
    			这是纯文本：{
       {txtmsg}}<br/>
    			
    			<div v-html="htmltag"></div>
    			
    			<input type="button" value="按钮" v-bind:disabled="isButtonDisabled" />
    			
    			<p>我今年:{
       {age}}岁了，明年肯定就是:{
       {age+1}}岁了</p>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		txtmsg:"hello vue",
    		htmltag:"<p style='background-color:red'>我是一个红色的段落</p>",
    		isButtonDisabled:true,
    		age:20
    	},
    	beforeCreate:function(){
    		console.log("vue实例创建前");
    	},
    	created:function(){
    		console.log("vue实例创建成功，即在内存中申请到了空间");
    	},
    	beforeMount:function(){
    		alert("渲染前");
    		console.log("渲染前");
    	},
    	mounted:function(){
    		//注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
    		alert("渲染后");
    		console.log("渲染后");
    	},
    	beforeUpdate:function(){
    		alert("数据更新前");
    		console.log("数据更新前");
    	},
    	updated:function(){
    		//注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated
    		alert("数据更新后，并渲染到页面上");
    		console.log("数据更新后，并渲染到页面上");
    	},
    	beforeDestroy:function(){
    		console.log("vue实例销毁前调用，说声bye-bye吧");
    	}
    });
    
    </script>