<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/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: 'hello vue!',
},
//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>
本文暂时没有评论，来添加一个吧(●'◡'●)