Vue 生命周期函数
吐槽：最近学习 Vue 的生命周期函数，有点搞不懂，为什么要叫钩子函数？？？以前了解过 React 的生命周期，开始我已经 Vue 的生命周期理解起来应该和 React 类似，但是生命周期钩子函数是什么鬼，难道是和 Vue 其它地方环环相扣，有数据交互？
了解了之后发下，没有那么复杂，其实…就是和 React 生命周期类似，还是没有懂为什么要叫钩子函数？希望有大神可以答疑
什么鬼？
好了，不皮了，下面开始正式说 Vue 生命周期钩子函数
1. 生命周期方法详解
| 钩子函数 | 详情 | 场景 | 备注 |
|---|---|---|---|
| beforeCreate | 实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined | 可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些 | |
| created | 实例创建完成后，data、methods 被初始化 | 结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时 | |
| beforeMount | 挂载初始之前，完成 el 初始化，render 被初次调用 | 也可以发送数据请求 | 在服务器端渲染期间不会被调用 |
| mounted | 完成挂载 | 获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求 | 在服务器端渲染期间不会被调用 |
| beofreUpdate | 挂载开始之前调用 | 挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据 | 在服务器渲染期间不会被调用，只有初次渲染会在服务端调用 |
| updated | 由于数据更改，重新渲染界面时调用 | 可执行依赖于 DOM 的操作 | 服务器端渲染期间不会被调用 |
| activated | keep-alive 组件激活时调用 | 服务器端渲染期间不会被调用 | |
| deactivated | 组件停用时调用 | 服务器端渲染期间不会被调用 | |
| beforeDestroy | 实例销毁之前调用 | 删除钱发出确认信息；清理定时器 | 服务器端渲染期间不会被调用 |
| destroyed | 实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁 | 提示已删除 | 服务器端渲染期间不会被调用 |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。 | 修改组件状态 | 2.5.0新增 |
2. 日常举栗子：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="change()">change</button>
<button v-on:click="destr()">destroy</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 66
},
beforeCreate: function () {
console.group('beforeCreate 创建前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
created: function () {
console.group('created 创建完毕');
console.log("el: " + this.$el);
console.log("data: " + this.$data + JSON.stringify(this.$data));
console.log("message: " + this.message)
},
beforeMount: function () {
console.group('beforeMount 挂载前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
mounted: function () {
console.group('mounted 挂载结束');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
updated: function () {
console.group('updated 更新完成');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
destroyed: function () {
console.group('destroyed 销毁完成');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
methods: {
change() {
app.message++;
},
destr() {
app.$destroy();
}
}
})
</script>
</body>
</html>
2.1直接加载页面，页面显示：
初始化
控制台：
初始化
2.2 点击 change 按钮，页面：
change
控制台：
change
2.3 点击 destroy ，页面：
destory
控制台：
destory
之后，再点击 change 按钮，页面与控制台都不会再发生变化。
最后用官网的一张图压轴，如果有不对的地方，欢迎指正
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
