概述
在 Vue 实例创建、更新、销毁等不同阶段，Vue 会自动调用一系列函数提供给用户在不同阶段加入自己的代码对 Vue 进行操作。
beforeCreate
在实例化之后、在 数据劫持 和 事件配置 之前执行 beforeCreate ，此时组件的数据对象还未创建。$el 和 $data 还未初始化完成，因此无法访问。
beforeCreate() {
console.log("beforeCreate-阶段：");
console.log(this.$el, "$el"); // undefined
console.log(this.$data, "$data"); // undefined
},
created
实例创建完成后执行 created ，该阶段实例已经完成了 数据劫持 和 this绑定。
此时 $data 可以访问到数据对象了，模板（template） 还未被创建，所以 $el 还无法访问。
created() {
console.log("created-阶段：");
console.log(this.$el, "$el"); // undefined
console.log(this.$data, "$data"); // {}
},
beforeMount
在挂载开始之前执行 beforeMount ，此时 模板（template） 已经编译完成，但是还未被挂载到页面中。
beforeMount() {
console.log("beforeMount-阶段：");
console.log(this.$el, "$el"); // undefined
console.log(this.$data, "$data"); // {}
},
mounted
在挂载完成后执行 mounted ，此时 模板（template） 已被挂载到页面中并且可以访问 $el 属性。
mounted() {
console.log("mounted-阶段：");
console.log(this.$el, "$el"); // [object HTMLDivElement]
console.log(this.$data, "$data"); // {}
},
beforeUpdate
在数据更新之前被执行 beforeUpdate ，此时数据已经是最新的了，但是视图还未更新。可以进行一些更新前的操作。
beforeUpdate() {
console.log("beforeUpdate-阶段：");
},
updated
在数据更新之后执行 updated ，此时数据已经更新完成，可以进行一些更新后的操作。
updated() {
console.log("updated-阶段：");
},
beforeDestroy
在实例销毁之前执行 beforeDestroy ，此时实例还未被销毁，可以进行一些清理副作用操作。例如，移除事件监听，清理定时器等。
beforeDestroy() {
console.log("beforeDestroy-阶段：");
},
destroyed
在实例销毁之后执行 destroyed ，此时实例已经销毁，无法再访问到实例的属性和方法。
destroyed() {
console.log("destroyed-阶段：");
},
