（二、2）Vue的 父子组件 切换页面 生命周期 执行过程
（二、2）Vue的 父子组件 切换页面 生命周期 执行过程
首先我觉得要先简介vue
--------------------- 所谓低门槛和渐进式：（比较容易开发者上手开发，从简单不断扩充到复杂的应用）
------------------- 所谓轻量级：（Vue2.0版本代码压缩据说只要17kb大小。）
------------------- 所谓命名式：（当你想要做什么的时候，通过指令，返回想要的结果，可以不用动脑子的操作）。区别于react是声明式。
------------------- 所谓组件化：（单文件组件，解耦，易开发维护）
------------------- 所谓高效率和虚拟DOM(virtual DOM)：（Vue将真实的DOM数据以对象的形式抽离出来。数据修改，再将VNode以特定的渲染机制渲染成真实的DOM）
------------------ 所谓响应式：（Vue2x版本采用object.defineproperty数据劫持。3.0版本修改为proxy代理）
------------------ 所谓SPA单页面：（Vue拥有一个Root组件，所有页面展示都围绕这个Root Compontent展示。）
----------------- 所谓MVVM：（由前端架构MVC发展而来，M(数据层)-V(视图层)-VM(数据和视图的联系)，数据变化，通过ViewModel触发视图变化，不再是MVC里面的单向变化，MVVM数据和视图是双向变化（所谓响应式）。）
这个简介不错https://blog.csdn.net/zhenghao35791/article/details/67639415
八个声明周期
就学了个唱，就知道是顺序加载， 也是在用到取数据，或者控件渲染的时候用到顺序，才来写这个
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
送测试文件：html 跑一下你就晓得了
注意看什么时候才能取到值 加载的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
生命周期的详解https://segmentfault.com/a/1190000011381906
我看评论里面快打起来了 说的就是运行的版本和引入的版本
父子组件的相互生命周期
探讨父组件和兄弟组件的生命周期https://juejin.cn/post/6844903827406061576
页面切换时候的生命周期的执行过程
