VUE学习-生命周期

生命周期

函数	描述
beforeCreate	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
beforeMount	1. 在挂载开始之前被调用：相关的 render 函数首次被调用。 2. 该钩子在服务器端渲染期间不被调用。
mounted	1. 实例被挂载后调用，这时 el 被新创建的 vm.\(el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.\)el 也在文档内。 2. 该钩子在服务器端渲染期间不被调用。
beforeUpdate	1. 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 2. 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated	1. 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 2. 该钩子在服务器端渲染期间不被调用。
activated	1. 被 keep-alive 缓存的组件激活时调用。 2. 该钩子在服务器端渲染期间不被调用。
deactivated	1. 被 keep-alive 缓存的组件停用时调用。 2. 该钩子在服务器端渲染期间不被调用。
beforeDestroy	1. 实例销毁之前调用。在这一步，实例仍然完全可用。 2. 该钩子在服务器端渲染期间不被调用。
destroyed	1. 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。 2. 该钩子在服务器端渲染期间不被调用。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick

var nextTickFunt = function () {
	// Code that will run only after the
	// entire view has been rendered
}
mounted: function () {
	this.$nextTick(nextTickFunt)
}
updated: function () {
	this.$nextTick(nextTickFunt)
}

生命周期函数

实例生命周期钩子

new Vue({
	data: { a: 1 },
	created: function () {
		// `this` 指向 vm 实例
		console.log('a is: ' + this.a)
	}
}) // => "a is: 1"

不要在选项 property 或回调上使用箭头函数，比如

created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。

因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图示