一、概念
世间万物都有自己生命周期，vue也有这一特点，vue的生命周期可以简单分为四个阶段：创建阶段，挂载阶段，更新阶段，销毁阶段。
每个 Vue 实例在被创建时都要经过一系列的初始化过程------例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
一、创建阶段
1、beforeCreate
在组件实例创建之前调用，此时组件的数据观测、事件监听和模板编译尚未开始，因此无法访问到组件的响应式数据、计算属性、方法等
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
beforeCreate () {
console.log("创建前")
}
}
</script>
2、created
在组件实例创建之后调用，此时组件的数据观测、事件监听和模板编译已经完成，可以访问到组件的响应式数据、计算属性、方法等，但是还没有挂载到 DOM 上，因此无法访问到组件的元素或子组件。常用于发送网络请求
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
created () {
console.log("创建后")
}
}
</script>
二、挂载阶段
1、beforeMount
在组件挂载到 DOM 之前调用，此时组件的虚拟 DOM 已经创建，但是还没有插入到父容器中，可以对虚拟 DOM 进行一些操作或修改
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
beforeMount () {
console.log("挂载前")
}
}
</script>
2、mounted
在组件挂载到 DOM 之后调用，此时组件的虚拟 DOM 已经插入到父容器中，并且生成了真实的 DOM 节点，可以访问到组件的元素或子组件，并且可以执行一些需要 DOM 的操作。
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
mounted () {
console.log("挂载后")
}
}
</script>
三、更新阶段
1、beforeUpdate
在组件更新之前调用，此时组件的数据已经发生变化，但是还没有更新到 DOM 上，可以在这个钩子中获取更新前的状态，并进行一些比较或逻辑处理。
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
beforeUpdate () {
console.log("更新前")
}
}
</script>
2、updated
在组件更新之后调用，此时组件的数据已经更新到 DOM 上，并且完成了重新渲染，可以在这个钩子中获取更新后的状态，并进行一些后续操作或效果处理。不能在这个生命周期里做响应式操作，否则会死循环
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
updated () {
console.log("更新后")
}
}
</script>
四、卸载阶段
1、beforeUnmount
在组件卸载之前调用，此时组件还处于可用状态，可以在这个钩子中执行一些清理操作，如移除事件监听器、取消网络请求、停止定时器等。
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
beforeUnmount () {
console.log("卸载前")
}
}
</script>
2、unmounted
在组件卸载之后调用，此时组件已经从 DOM 中移除，并且停止了所有的响应式效果和事件监听，无法再访问到组件的任何属性或方法。
<template>
<div>
生命周期
</div>
</template>
<script>
export default {
unmounted () {
console.log("卸载后")
}
}
</script>
十、forceUpdate
1、概念
迫使Vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件
2、基本使用
把当在data里没有显示的声明一个对象的属性，而是之后给该对象添加属性，这种情况vue是检测不到数据变化的，可以使用$forceUpdate()
<template>
<div>
{{ name }} <button @click="update">改变名字为李四</button>
</div>
</template>
<script>
export default {
methods: {
update () {
this.name = '李四'
// 如果不加forceUpdate 页面不会渲染
this.$forceUpdate()
}
}
};
</script>
3、注意
官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题。😈