生命周期
- beforeCreate：在Vue实例创建之前调用。此时组件的数据观测和事件机制尚未初始化，无法访问到
props、data、computed、methods等。 - created：在实例创建完成后调用。此时已完成数据观测，可以访问到
props、data、computed、methods等，并可以进行数据初始化、异步请求等操作。 - beforeMount：在组件挂载到 DOM 之前调用。此时模板编译已完成，但尚未将生成的 HTML 插入页面。
- mounted：在组件挂载到 DOM 后调用。此时组件已经被插入到页面中，可以操作 DOM、进行异步请求等操作。通常在这里进行一些需要 DOM 的操作或启动定时器的操作。
- beforeUpdate：在组件更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。在这个阶段可以在更新之前访问到现有的 DOM。该钩子函数在data数据发生变化之后调用，此时data里面的数据已经是最新的了，但是页面上DOM还没有更新最新的数据。
- updated：在组件更新之后调用。此时组件的数据已经更新，虚拟 DOM 重新渲染和打补丁完成，可以执行与更新后的 DOM 相关的操作。页面渲染了data中的新数据, 不要在updated中修改data数据，很容易造成死循环。
- beforeDestroy：在销毁组件之前调用。此时组件实例仍然完全可用，可以执行一些清理操作，如清除定时器、取消订阅等。
- destroyed：在销毁组件之后调用。此时组件实例已经被销毁，所有的事件监听器和观察者都已被移除。可以执行一些最后的清理工作。
在父子组件中的生命周期执行顺序又是怎么样的呢?
当页面第一次加载的时候
由图上的输出可得知, 当页面第一次加载的时候, 生命周期执行顺序为
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父组件-mounted
为什么不能先执行完父组件的mounted呢?
因为父组件中有子组件, 要先把子组件渲染到父组件上, 才能让父组件渲染到页面上, 所以父组件的mounted一定是在最后的
当销毁父组件的时候
销毁父组件, 生命周期的执行顺序为
父组件-beforeDestroy -> 子组件-beforeDestroy -> 子组件-destroyed -> 父组件-destroyed
个人理解: 销毁父组件的时候(也就是beforeDestroy), 会去查看里面是否有子组件, 如果有就去销毁所有的子组件, 当所有的子组件执行完destroyed后, 就开始真正的销毁父组件
