一.vue生命周期:
**从创建 **到 销毁 的整个过程就是 – Vue实例的 - 生命周期
1.钩子函数
Vue 框架内置函数,随着组件的生命周期阶段,自动执行
- 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据
- 4大阶段8个方法
- 初始化
- 挂载
- 更新
- 销毁
阶段 | 方法名 | 方法名 |
---|---|---|
初始化 | beforeCreate | created |
挂载 | beforeMount | mounted |
更新 | beforeUpdate | updated |
销毁 | beforeDestroy | destroyed |
2.初始化阶段
初始化阶段2个钩子函数作用和执行时机
- Vue() – Vue实例化(组件也是一个小的Vue实例)
- Events & Lifecycle – 初始化事件和生命周期函数
- injections&reactivity – Vue内部添加data和methods等
- created – 生命周期钩子函数被执行, 实例创建
- 接下来是编译模板阶段 –开始分析
- Has el option? – 是否有el选项 – 检查要挂到哪里
- 没有. 调用$mount()方法
- 有, 继续检查template选项
components/Life.vue - 创建一个文件
<script>
export default {
data(){
return {
msg: "hello, Vue"
}
},
// 一. 初始化
// new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
beforeCreate(){
console.log("beforeCreate -- 执行");
console.log(this.msg); // undefined
},
// data和methods初始化以后
// 场景: 网络请求, 注册全局事件
created(){
console.log("created -- 执行");
console.log(this.msg); // hello, Vue
this.timer = setInterval(() => {
console.log("哈哈哈");
}, 1000)
}
}
</script>
App.vue - 引入使用
<template>
<div>
<h1>1. 生命周期</h1>
<Life></Life>
</div>
</template>
<script>
import Life from './components/Life'
export default {
components: {
Life
}
}
</script>
3.挂载阶段
挂载阶段2个钩子函数作用和执行时机 不能获取真实DOM
1.template选项检查
-
有 - 编译template返回render渲染函数
-
无 – 编译el选项对应标签作为template(要渲染的模板)
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行
<template>
<div>
<p>学习生命周期 - 看控制台打印</p>
<p id="myP">{
{ msg }}</p>
</div>
</template>
<script>
export default {
// ...省略其他代码
// 二. 挂载
// 真实DOM挂载之前
// 场景: 预处理data, 不会触发updated钩子函数
beforeMount(){
console.log("beforeMount -- 执行");
console.log(document.getElementById("myP")); // null
this.msg = "重新值"
},
// 真实DOM挂载以后
// 场景: 挂载后真实DOM
mounted(){
console.log("mounted -- 执行");
console.log(document.getElementById("myP")); // p
}
}
</script>
4.更新阶段
更新阶段2个钩子函数作用和执行时机 获取更新后的DOM在updated钩子函数
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环
准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始
<template>
<div>
<p>学习生命周期 - 看控制台打印</p>
<p id="myP">{
{ msg }}</p>
<ul id="myUL">