关于Vue生命周期
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。
(可以在浏览器F12控制台中查看相关记录)启动顺序:
- beforeCreate
- created
- beforeMount
- mounted
更新属性值的事件流程:
- beforeUpdate
- updated
Vue销毁流程:
- beforeDestroy
- destroyed
在属性值更新之后(更新属性值是异步操作),要执行DOM操作可以在下面的代码中执行.
this.msg="更新值";
this.$nextTick(function () {
// msg值已经完成更新,并且DOM已经重新加载.
})
示例
示例中的销毁Vue实例,因为会执行消息提示到页面,所以会执行更新属性值的事件!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue</title>
<meta charset="UTF-8"/>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
</style>
</head>
<body>
<div id="app">
<div>name:{{name}}</div>
<div>name input:<input type="text" v-model="name"/></div>
<div style="color:#ff0000;font-size: 22px;">{{msg}}</div>
<div><input type="button" value="销毁vue实例" @click="destroyVue()"/></div>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
name:'李四',
msg:'-',
eventArr:[]
},
methods:{
destroyVue:function() {
/*
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子。
在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。
*/
this.msg="警告信息: Vue 实例已销毁!";
this.$nextTick(function () {
// DOM 更新之后,销毁实例.
this.$destroy();
})
}
},
beforeCreate:function(){
// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
console.log("beforeCreate");
},
created:function(){
// 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
console.log("created")
},
beforeMount:function(){
// 在挂载开始之前被调用：相关的 render 函数首次被调用。
//
// 该钩子在服务器端渲染期间不被调用。
console.log("beforeMount")
},
mounted:function(){
/*
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。
*/
console.log("mounted")
},
beforeUpdate:function(){
/*
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
*/
console.log("beforeUpdate");
},
updated:function(){
/*
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
该钩子在服务器端渲染期间不被调用。
*/
console.log("updated");
},
activated:function() {
/*
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
*/
console.log("activated");
},
deactivated:function() {
/*
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
*/
console.log("deactivated");
},
beforeDestroy:function(){
/*
实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
*/
console.log("beforeDestroy");
},
destroyed:function(){
/*
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
*/
console.log("destroyed");
},
errorCaptured:function(){
/*
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。
错误传播规则
默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。
如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。
一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。
*/
console.log("errorCaptured");
}
})
</script>
</body>
</html>