Vue生命周期
Vue生命周期:一个Vue实例从创建到销毁的整个过程。
生命周期的四个阶段:创建、挂载、更新、销毁。
生命周期函数(钩子函数)
Vue生命周期中,会自动运行一些函数,被称为生命周期钩子,让开发者可以在特定阶段运行自己的代码。
<div id="app">
<h3>{{title}}</h3>
<div>
<button @click="count--">-</button>
<span>{{count}}</span>
<button @click="count++">+</button>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100,
title: '计数器',
},
//创建阶段
beforeCreate() {
console.log(' beforeCreate响应式数据准备号之前', this.count);
},
created() {
console.log('created响应式数据准备好之后', this.count);
//可以开始发送初始化的请求
},
//挂载阶段(渲染模版)
beforeMount() {
console.log('beforeMount模版渲染之前', document.querySelector('h3').innerHTML);
},
mounted() {
console.log('mounted模版渲染好之后', document.querySelector('h3').innerHTML);
},
//更新阶段
beforeUpdate() {
console.log('更新前', document.querySelector('span').innerHTML);
},
updated() {
console.log('更新后', document.querySelector('span').innerHTML);
},
//卸载阶段
beforeDestroy() {
console.log('卸载前');
},
destroyed() {
console.log('卸载后');
}
})
</script>
卸载阶段是在关闭浏览器时才会执行。可以在控制台调用实例.$destroy().