生命周期
生命周期钩子函数介绍：
是在生命周期中添加的一些函数，这些函数可以让开发者加入自己额外的逻辑。每个 Vue 实例在被创建时都要经过一系列的初始化过程。需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
演示
先引入vue.js，可以控制台查看执行顺序
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" v-on:click="modefind">
{{ message }} {{ count }}次
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '点击',
count: 0
},
// 初始化阶段，Vue的生命周期从创建一个Vue实例开始，之后Vue要进行初始化事件和初始化生命周期。
beforeCreate() {
console.log('before create', this.message) // ! beforeCreate,这个勾子函数执行在初始化之后，组件创建之前，还不能访问数据，所有data为空
},
created() {
console.log('created...', this.message) // ! created,这个勾子函数执行在组件创建完成之后立即调用，组件有了data对象，所有可以操作data
},
// 挂载阶段，
beforeMount() {
console.log('before mount', this.$el) // ! vue在挂载前先执行beforeMount钩子函数,这个时候html还没有创建，data数据已经存在，虚拟的dom也已经创建
},
mounted() {
console.log('mounted...', this.$el) // ! vm.$el替换旧的el，切换掉原有的编译模板。完成页面的数据挂载后执行Mounted，这时可以操作数据和DOM了
},
// 更新阶段
beforeUpdate() {
console.log('before update') // ! 当数据更新之前调用beforeUpdate钩子函数，可以监听数据，但是不能在这里修改数据
},
updated() {
console.log('updated...') // ! 虚拟DOM重新渲染完成后执行的钩子函数，我们可以获取到新的数据
},
// 销毁阶段，
beforeDestroy() {
console.log('before destroy') // ! 当组件销毁之前我们还是可以获取到数据的，实例也完全可用，
},
destroyed() {
console.log('destroyed...') // ! 当组件销毁完成过后就不能操作DOM，所有的实例，子实例，事件监听器都会被解绑
},
methods: {
modefind() {
this.count += 1
}
}
})
</script>
</body>
钩子函数：
create 阶段：
- beforeCreate()：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
- created()：在实例创建完成后被立即同步调用，这时可以获取到选项中的 data 数据进行处理。
mount 阶段：
- beforeMount()：在挂载开始之前被调用：相关的
render函数首次被调用。 - mounted()：实例被挂载后调用，这时
el被新创建的vm.$el替换了
update 阶段：
- beforeUpdate()：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
- updated()：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
destroy 阶段：
通常在销毁阶段，会销毁的资源：已启动的定时器、未完成的网络请求、手动绑定的事件、释放 socket 连接等...
- beforeDestroy()：实例销毁之前调用。
- destroyed()：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
还有两个钩子函数keep-alive阶段
keep-alive 是 Vue 提供的一个组件，用于缓存不活动的组件实例，而不是销毁它们。
- activated()：被 keep-alive 缓存的组件激活时调用。
- deactivated()：被 keep-alive 缓存的组件失活时调用。
**errorCaptured : ** 在捕获一个来自后代组件的错误时被调用。
