Vue的生命周期及钩子函数
Vue生命周期是指vue实例对象从创建之初到销毁的过程。
生命周期图:
vue实例的生命周期,及其八个钩子函数
- 1、创建 beforeCreate created
- 2、挂载 beforeMount mounted
- 3、更新 beforeUpdate updated
- 4、销毁 beforeDestroy destroyed
(1):①、beforeCreate:创建实例前。视图view和data数据模型都未被创建
②、created:创建完成(后)。视图view未被创建,data数据模型被创建
(2):①、beforeMount:挂载前(开始创建模型)。视图view未被真正创建只是进行占位,data数据模型被创建
②、mounted:挂载后(创建完成)。视图view被真正创建并进行数据绑定,data数据模型被创建
(3):①、beforeUpdate 更新前。data模型被更新,view视图未被更新。更新前的准备
②、updated 更新后。view和data都被更新。更新完成
(4):①、bbeforeDestroy 销毁前,做销毁前的准备
②、destroyed 销毁后。销毁完成
- 生命周期
生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;
在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,
在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;
- 生命周期钩子函数
生命周期钩子函数,让够让咱们在初始化实例时,添加自己的代码;
生命周期的钩子函数中的this,会默认指向vue的实例;
- 钩子函数
beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例,不再具有双向数据绑定的特点]
代码
<body>
<div id="app">
<div>
{
{msg}}
</div>
<ul>
<li v-for="a in arr"></li>
</ul>
<button @click="fn">点我一下</button>
</div>
<script src="../node_modules/axios/dist/axios.js"></script>
<script sr