#Vue生命周期钩子理解
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
{{ msg }}
</div>
<script>
/*
1. vue生命周期钩子 : vue实例从加载到销毁过程中会执行的一些回调函数
生命周期 : vue实例从创建到销毁的过程。 (vue实例创建, dom树完成渲染)
钩子 : 回调函数
2. vue生命周期4个阶段8个勾子
阶段一: 创建 (创建vue实例)
beforeCreate, created
阶段二: 挂载 (data数据渲染到el)
beforeMount,mounted
阶段三: 更新 (检测data变化并更新el)
beforeUpdate,updated
阶段四: 销毁 (解除data与el的绑定关系)
beforeDestroy,destroyed
3. vue第一次加载的时候会执行哪几个钩子
3.1 创建vue实例之前 : beforeCreate
3.2 创建vue实例之后 : created
3.3 挂载前 : beforeMount
3.4 挂载后(初始渲染) : mounted
4. vue常用钩子
created : 完成data数据创建 (一般用于axios请求网络数据)
mounted : 完成初始渲染 (一般用于操作dom)
5.注意点: vue生命周期钩子 不能使用 箭头函数
function函数: 钩子中的this指向 vue实例
箭头函数: 钩子中的this指向 window
*/
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
},
//1. beforeCreate : 创建vue实例之前
beforeCreate() {
//这个钩子: data中的数据还没有创建
console.log( this )
console.log( this.msg )//undefined
},
//2.created : vue实例创建完成
created() {
//这个钩子: 完成data的创建,但是还没有创建挂载点
console.log( this )
console.log( this.msg )//我是坤坤
},
//3.beforeMount : data数据挂载到el之前
beforeMount() {
//这个钩子:完成el的创建,但是没有挂载
console.log( this )
console.log( this.$el )//app盒子
},
//4.mounted : 完成挂载(data数据已经渲染到el上)
mounted() {
//这个钩子: 完成初始渲染(第一次把data渲染到el)
console.log( this )
console.log( this.$el )
},
//5.beforeUpdate : 数据更新前 (检测数据变化了,但是页面还没有更新)
beforeUpdate() {
console.log(this)
},
//6.updated : 完成数据更新(把修改后的data重新渲染到了页面)
updated() {
console.log(this)
},
//7.beforeDestroy : vue实例销毁前
/*
销毁前: 不是指vue实例销毁,而是解除data和el的绑定关系
说人话: 以后data变化了,跟el没有关系
销毁vue : vue实例.$destroy()
*/
beforeDestroy() {
console.log(this)
},
//8.已经销毁
destroyed() {
console.log(this)
},
})
</script>
</body>
</html>