Vue 生命周期函数

项目前导 学习笔记

一、生命周期函数

        生命周期函数代表的是 Vue 实例，或者是 Vue 组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为 创建阶段 、运行期间 以及 销毁期间。其中：

• 创建期间的函数有：beforeCreate、created、beforeMount、mounted；

• 运行期间的函数有：beforeUpdate、updated；

• 销毁期间的函数有：beforeDestroy、destroyed。

以下是官方文档给到的一张图，从这种图中我们可以了解到每个部分执行的函数。

1.1、创建期间

• beforeCreate： Vue 或者组件刚刚实例化，data、methods 都还没有被创建。

• created： 此时 data 和 methods 已经被创建，可以使用了。模板还没有被编译。

• beforeMount： created 的下一阶段。此时模板已经被编译了，但是并没有被挂在到网页中。

• mounted： 模板代码已经被加载到网页中了。此时创建期间所有事情都已经准备好了，网页开始运行了。

    <div id="app">
        <!--  创建  -->
        <p id="username">{{username}}</p>
    </div>


	<script>
	    new Vue({
	        el: "#app",
	        data: {
	            username:"老王",
	            message:"错误信息"
	        },
	        methods:{
	            demo: function(){
	                return "hello world"
	            }
	        },
	
	        <!--  创建期间  -->
	
	        beforeCreate(){
	            console.log("===== beforeCreate =====")
	            console.log(this.username);
	            console.log(this.demo);
	            console.log(" ")
	        },
	
	        created(){
	            console.log("===== created =====")
	            console.log(this.username);
	            console.log(this.demo);
	            console.log(" ")
	        },
	
	        beforeMount(){
	            console.log("===== beforeMount =====")
	            console.log(document.getElementById('username').innerText)
	            console.log(" ")
	        },
	
	        mounted(){
	            console.log("===== mounted =====")
	            console.log(document.getElementById('username').innerText)
	            console.log(" ")
	        },
	    })
	</script>

1.2、运行期间

• beforeUpdate： 在网页网页运行期间，data 中的数据可能会进行更新。在这个阶段，数据只是在 data 中更新了，但是并没有在模板中进行更新，因此网页中显示的还是之前的。

• updated： 数据在 data 中更新了，也在网页中更新了。

    <div id="app">
        <!--  创建  -->
        <p id="username">{{username}}</p>
        <!--  运行  -->
        <input type="text" v-model="username">
    </div>


	<script>
		...
	        <!--  运行期间  -->
	
	        beforeUpdate(){
	            console.log("===== beforeUpdate（显示之前的） =====")
	            console.log(document.getElementById('username').innerText)
	            console.log(" ")
	        },
	
	        updated(){
	            console.log("===== updated（显示修改后的） =====")
	            console.log(document.getElementById('username').innerText)
	            console.log(" ")
	        },
	    })
	</script>

1.3、销毁期间

• beforeDestroy： Vue 实例或者是组件在被销毁之前执行的函数。在这一个函数中 Vue 或者组件中所有的属性都是可以使用的。

• destroyed： Vue 实例或者是组件被销毁后执行的。此时 Vue 实例上所有东西都会解绑，所有事件都会被移除，所有子元素都会被销毁。

    <div id="app">
        <!--  创建  -->
        <p id="username">{{username}}</p>
        <!--  运行  -->
        <input type="text" v-model="username">
        <!--  销毁  -->
        <error-view v-bind:message="message" v-if="message"></error-view>
        <button @click="message=''">点击销毁</button>
    </div>


	<script>
	    Vue.component(
	        'error-view', {
	            props:['message'],
	            template:'<p style="color:red">{{message}}</p>',
	
	            <!--  销毁之前执行的函数  -->
	            beforeDestroy(){
	                console.log(this.message);
	            }
	        }
	    )
	    
		...
		
	</script>