Vue生命周期函数

傷城~ 2022-02-25 12:42 273阅读 0赞

Vue 的声明周期函数

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="lib/vue.js"></script>
    	</head>
    	<body>
    		<div id="app"></div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					msg:"ok"
    				},
    				methods:{
    					show(){
    						console.log("执行了show方法")
    					}
    				},
    				//生命周期函数
    				beforeCreate(){
    					// 这是我们遇到的第一个生命周期函数,表示实例被完全创造出来之前会执行它
    					// console.log(this.msg) 会报错
    					// 在这个生命周期中,data,methods 的数据,都还没有被初始化
    				},
    				created(){
    					//这是遇到的第二个生命周期函数
    					// data 和 methods已经被初始化好了
    					console.log(this.msg)
    					this.show()
    				},
    				beforeMount(){
    					//这是第3个生命周期函数,表示模板已经在内存中,但是还没有进行挂载
    					//挂载前,如果获取页面元素,{
       {msg}},获取到的是还没有替换的状态
    					
    				},
    				mounted(){
    					//内存中的模版已经挂载到页面,用户可以看到页面了
    					// mounted是实例创建期间,最后一个周期函数,当执行完moubted,实例被完全创建好
    				},
    				
    				//组件运行阶段的生命周期函数
    				beforeUpdate(){//这个时候,数据被更新了,但是页面还没有更新
    					//此时,页面中的数据还是旧的,但是data的数据是最新的
    				},
    				updated(){//updated执行的时候,页面和数据已经保持同步了
    					
    				},
    				beforeDestroy(){
    					//当执行beforeDestroy的时候,就已经从运行阶段,进入到销毁阶段
    					//当执行这个的时候,实例身上的所有东西都处于可用状态
    				},
    				destroyed(){
    					//当执行到这里的时候,组件已经被完全销毁了
    					//此时 组件中的所有数据 方法指令过滤器,都已经不可用了
    				}
    			})
    		</script>
    	</body>
    </html>