大致分为8个生命周期
- beforeCreate
实例化之前，el 和 data 并未初始化
2.created
实例化之后，data初始化，不能访问到$el属性
3.beforeMount
能访问到$el属性,组件挂载之前，数据未显示，但是虚拟dom已经配置完成
4.mounted
组件挂载完成
5.beforeUpdate
组件更新前，页面仍然未更新，但是虚拟dom已经配置
6.updated
组件更新，页面更新
7.beforeDestroyed
调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。
8.destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
emmm...,还有3个生命周期,详见
9.activated
keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
- deactivated
keep-alive组件停用时调用。该钩子在服务器端渲染期间不被调用。
- errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
demo
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: `hello`
},
template: '<div id="app"><p>{{message}}</p></div>',
beforeCreate() {
console.log('调用beforeCreate')
console.log(this.message)
console.log(this.$el)
},
created() {
console.log('调用created')
console.log(this.message)
console.log(this.$el)
},
beforeMount() {
console.log('调用beforeMount')
console.log(this.message)
console.log(this.$el)
},
mounted() {
console.log('调用mounted')
console.log(this.message)
console.log(this.$el)
},
beforeUpdate() {
console.log('调用beforeUpdate')
console.log(this.message)
console.log(this.$el)
},
updated() {
console.log('调用updated')
console.log(this.message)
console.log(this.$el)
},
beforeDestory() {
console.log('调用beforeDestory')
console.log(this.message)
console.log(this.$el)
},
destoryed() {
console.log('调用Destoryed')
console.log(this.message)
console.log(this.$el)
}
})
vm.message = `gaoxuerong`
</script>
</html>
