Vue 生命周期
2020-02-12 本文已影响0人
鹤仔z
此文章面向Vue2.0
什么是生命周期
- 生命周期是一种拟人化的说法，每个Vue的实例或组件从创建到废除要经历多个流程，这个周期就是Vue的生命周期。我们有时想在特定的流程中对实例进行一些操作，于是生命周期钩子函数就出现了——生命周期钩子允许我们在实例的不同的生命周期阶段对其进行操作，以便于我们更好地控制代码。
生命周期都有哪些
-
beforeCreate：创建前
- 当前生命周期是Vue初始化的时候执行的钩子函数，在其执行的时候组件还未进行创建。
- 在这个函数里，data和methods都还没有将自身的属性和方法代理到Vue的实例身上。因此在当前生命周期中是访问不到data中的属性和methods中的方法的。
使用场景：可以在当前周期中进行loading的显示。
-
created：创建后*
- 因为当前生命周期函数是组件创建后执行的，因此可以在当前生命周期中进行前后端交互
- 当前生命周期在执行时会将data身上所有属性进行数据劫持，给每一个属性都添加getter方法和setter方法。
- 当前生命周期在执行的时候，将data身上的所有属性和methods身上所有的方法代理添加到Vue的实例身上
使用场景：在这里可以做初始数据的获取，进行前后端交互。
-
beforeMount：挂载前
- 当前生命周期是组件挂载到页面之前执行的钩子函数。
- 当前生命周期中，数据和模板还未结合，因此访问不到真实的DOM。（访问到的DOM类似于：<h2>{{msg}}</h2>)
使用场景：可以在当前生命周期函数中对数据进行最后的更改。
-
mounted：挂载后*
- 当前生命周期在组件被挂载到页面的时候执行生命周期函数，可以访问到真实的DOM结构。
- 当前生命周期函数中，数据和模板已经结合，即DOM已经渲染完毕。
使用场景：可以访问到真实的DOM结构，并进行相应的DOM操作。
-
beforeUpdate：更新前*
- 此函数在数据更新的时候才会执行。
- 当前生命周期函数中，可以访问到真实的DOM结构。
- 当前生命周期函数中，更新的数据还未和模板进行结合。
使用场景：对更新的数据做最后的处理，切记不可进行数据修改否则会出现死循环。
-
updated：更新后*
- 当前生命周期中，数据和模板已经相结合。
- 可以在当前生命周期函数中获取到数据更新后最新的DOM结构。
- 如果在当前生命周期进行实例化操作，一定要进行边界条件处理，否则会造成性能消耗。
使用场景：获取数据更新后最新的DOM结构。
-
beforeDestroy：销毁前*
- 当前生命周期函数会在组件被销毁之前执行。
- 在当前的声明周期中仍然可以访问到真实的DOM结构。
使用场景：在当前生命周期中进行事件解绑、定时器的清楚等（性能的优化）。
-
destroyed：销毁后
- 在当前生命周期中，访问不到真的DOM结构。
- 当前生命周期会断开与Vue的关联。
使用场景：还是善后。
代码演示
<body>
<div id="app">
<span>{{msg}}</span>
<button @click="changeHandler">改变文字</button>
</div>
</body>
let vm = new Vue({
el:"#app",
data:{
msg:"你好"
},
methods:{
changeHandler(){
this.msg = "你坏坏";
}
},
beforeCreate(){
console.log("beforeCreate执行了");
console.log(this.msg); // undefined ——此时data和methods还没有将属性和方法代理到实例身上
},
created(){
console.log("created执行了");
console.log(this.msg); // 你好
},
beforeMount(){
console.log("beforeMount执行了");
console.log(document.getElementsByTagName("span")[0]); // <span>{{msg}}</span>
},
mounted(){
console.log("mounted执行了");
console.log(document.getElementsByTagName("span")[0]); // <span>你好</span>
},
beforeUpdate(){
console.log("beforeUpdate执行了");
console.log(this.msg); // 你坏坏
console.log(document.getElementsByTagName("span")[0]); // <span>你坏坏</span>
console.log(document.getElementsByTagName("span")[0].offsetWidth); // 32
},
updated(){
console.log("updated执行了");
console.log(this.msg); // 你坏坏
console.log(document.getElementsByTagName("span")[0]); // <span>你坏坏</span>
console.log(document.getElementsByTagName("span")[0].offsetWidth); // 48
},
beforeDestroy(){
console.log("beforeDestroy执行了"); // 待更新
},
destroyed(){
console.log("destroyed执行了"); // 待更新
}
})
Vue 生命周期来自官网的图示：
Vue生命周期
