VUE2和VUE3 生命周期

VUE声明周期可分为8个部分

再做vue的时候引用了一些外部js框架，发现无论怎么改都不生效，然后就怀疑可能是vue的生命周期的问题，然后根据生命周期的钩子函数一个个测试后，发现框架在mounted使用生效了。所以这里再次记录下vue的生命周期，以加深记忆

VUE2

<script type="text/javascript">
	beforeCreate //创建前
	created //创建后
	beforeMount //载入前
	mounted //载入后
	beforeUpdate //更新前
	updated //更新后
	beforeDestroy //销毁前
	destroyed //销毁后
</script>

应用场景

1、beforeCreate 创建前，我理解为是创建vue实例之前，比如你想要创建vue实例之前做一个 loading 动画
2、created 创建后，对比上一个，很明显是创建vue实例以后做的工作，比如我们通过axios做的异步请求数据，就可以在创建完成vue实例后处理
3、beforeMount 载入前，我认为理解成渲染前更合适，大家都知道vue在浏览器上显示的时候是会先渲染出一个虚拟DOM的，然后将这个DOM最终渲染到浏览器上，beforeMount 正是渲染出这个DOM之前做的事情，但对比 created 不难发现，他能做的在 created 中几乎都能做，所以用处不大，在 created 中也可。
4、mounted 载入后，同上，我认为理解为渲染后更合适，这时DOM节点已经渲染完成，所以可以在这里找到HTML的节点，对节点进行操作，我上面应用js框架不生效就是因为用错了生命周期的钩子函数，因为我应用的js必须获取 HTML 节点，所以我就需要在 mounted 这个钩子函数中使用，前三个都无法获取HTML节点。
5、beforeUpdate 更新前，我认为描述为 view 层数据更新前更合适，大家都知道VUE的view层的数据是和VUE中的 data 数据绑定的，当data数据发生变化的时候，view 层数据也会变化，而beforeUpdate就是VUE中data层数据已经发生变化，但是view层数据还未更新变化的时候（如果只是data层变化，不需要view层变化是不会触发此钩子函数的）。
6、updated 更新后，同第五条，就是data数据和view层数据都发生变化后做的事情
7、beforeDestroy 销毁前（如果路由不使用 keep-alive缓存，离开当前路由就会销毁，所以销毁前就是已经离开路由，要进行销毁，但还未进行销毁这个动作时），一般在使用 destroy 函数时调用常用在确认停止事件的时候，比如 你确认删除XX吗？

beforeRouteLeave(to, from, next) {
  this.$destroy();//销毁动作
  next();
}

8、destroyed 销毁后

VUE3

<script type="text/javascript">
	onBeforeMount //安装前，在组件安装之前执行
	onMounted //安装后，在组建安装之后执行
	onBeforeUpdate //修改前，在组件修改之前执行
	onUpdated //修改后，在组件修改之后执行
	onBeforeUnmount //卸载前，在组件卸载之前执行
	onUnmounted //卸载后，在组件卸载之后执行
	onErrorCaptured //报错时  一般用来处理报错时的处理措施  针对子孙组件
	onRenderTracked //渲染时  一般用来调试程序
	onRenderTriggered //渲染周期函数时  一般用来调试程序
	onActivated //激活时  刚打开组件时，组件被激活生效   一般配合keep-alive使用
	onDeactivated //组件失效时  切换组件，组件失效时生效 一般配合keep-alive使用
</script>

VUE3 生命周期钩子用法

import { onMounted, onUpdated, onUnmounted } from 'vue'
setup() {
  onMounted(() => {
    console.log('mounted!')
  })
  onUpdated(() => {
    console.log('updated!')
  })
  onUnmounted(() => {
    console.log('unmounted!')
  })
}