Vue 实例创建到销毁的整个过程。
钩子函数
Vue 框架内置函数,随着组件的生命周期阶段,自动执行。
可以知道 Vue 声明周期到达了哪个阶段。
- 作用:特定的时间点,执行特定的操作。
- 场景:组件创建完成后,可以在 created 生命周期函数中发起 Ajax 请求,从而初始化 data 数据。
- 四个阶段:初始化、挂载、更新、销毁。
- 在before… 时,都是在内存中执行的。
初始化
beforecreate
:一般使用场景是在加 loading 事件 的时候。created
:处于loading 结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载)。
挂载
beforemount
:处于组件创建完成,但未开始执行操作。mounted
:处于发起后端请求,获取数据,配合路由钩子执行操作(DOM渲染完成,组件挂载完成 )。
更新
beforeupdate
、updated
:处于数据更新的前后。
销毁
一般用作清除定时器。
beforeDestroy
:当前组件还在的时候,想删除组件。destroyed
:当前组件已被销毁,清空相关内容 。
生命周期
阶段 | 方法名 | 方法名 |
---|---|---|
初始化 | beforeCreate | created |
挂载 | beforeMount | mounted |
更新 | beforeUpdate | updated |
销毁 | beforeDestroy | destroyed |
执行过程
App.vue
<template>
<div>
<Life v-if="isShow == true"></Life>
<button @click="isShow = false">点击销毁组件</button>
</div>
</template>
<script>
import Life from './components/life.vue'
export default {
data () {
return {
isShow: true,
}
},
components: {
Life,
},
}
</script>
Life.vue
<template>
<div id="myApp">
{{ msg }}
<button @click="msg = 'Hello Vue'">点击修改msg的值</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World'
}
},
/* 初始化阶段:在Vue实例创建完成之前触发,
这时候还没有初始化data中的数据以及methods中的方法
*/
beforeCreate () {
console.log('beforeCreate执行了');
console.log(this.msg, 'msg'); // undefined
},
/* 初始化阶段:
这时候data中的数据初始化完成,但是拿不到真实dom
*/
created () {
console.log('created执行了');
console.log(this.msg, 'msg'); // Hello World
console.log( document.querySelector('#myApp'), '#myApp'); // null
// 测试销毁组件:销毁定时器
// 因为本质是对象,可以使用this.创建属性
this.timeId = setInterval(function() {
console.log(1);
}, 1000);
},
/* 挂载阶段:将 template模板中的内容在内存中编译完成,会立即执行函数,
内存中的模板结构还没有真正渲染到页面上,所以看不到真实的数据,只能看到一个模板。
*/
beforeMount () {
console.log('beforeMount执行了');
console.log( document.querySelector('#myApp'), '#myApp'); // null
},
/* 挂载阶段:把内存中渲染好的模板结构替换到页面上。
能获取真实dom。
*/
mounted () {
console.log('mounted执行了');
console.log( document.querySelector('#myApp'), '#myApp'); // <div id="myApp">···</div>
},
/* 更新阶段:数据的最新的,但是页面呈现的数据还是旧的。
*/
beforeUpdate () {
console.log('beforeUpdate执行了');
console.log(this.msg, 'this.msg'); // Hello Vue
},
/* 更新阶段:页面完成更新,data中的数据和页面的数据都是最新的。
可以获取最新的dom元素。
*/
updated () {
console.log('updated执行了');
console.log(this.msg, 'this.msg'); // Hello Vue
console.log( document.querySelector('#myApp') ); // 最新的dom
},
/* 销毁阶段:
*/
beforeDestroy () {
console.log('beforeDestroy执行了');
},
/* 销毁阶段:可以清理定时器,清理事情绑定。
*/
destroyed () {
console.log('destroyed执行了');
// 销毁定时器
clearInterval(this.timeId);
},
}
</script>
总结
-
初始化
在Vue实例创建完成之前触发,还没有初始化data中的数据以及
methods
中的方法。可以在这里 最早发起 Ajax 请求,从而初始化 data 数据。
.vue 中写的是虚拟dom,.html 中的标签都是真实dom。
好处:虚拟dom只更新更改的dom属性,不会遍历所有的属性,更快,更节省性能。
-
挂载
将
template
模板中的内容在内存中编译完成,会立即执行函数,并将模板结构替换到页面上。场景:会在
mounted
中初始化一些插件。 -
更新
当 data 里数据改变,并更新页面元素时,会触发更新。
在 updated 中获取最新的dom元素。
-
销毁
场景:手动清除计时器/定时器/全局事件。
beforeCreate 通过Ajax准备数据,mounted 渲染页面,beforeUpdate 更新数据,destroyed 清除事件。