Vue的几个生命周期

        Vue实例在被创建到销毁期间,会触发一系列的生命周期钩子函数,这些生命周期钩子函数在不同的阶段会被调用,我们可以对这些生命周期函数进行重写,在不同阶段添加自己的代码逻辑。

        Vue生命周期主要分为四个阶段:

1. 初始化阶段:在beforeCreate和created阶段调用。在这阶段,Vue实例的挂载元素$el 和数据对象data 被创建,但还未建立响应式关联。

上述语句简单的实现:在页面生成前判断用户状态，并跳转页面

 

2. 模板编译:在beforeMount和mounted阶段调用。在beforeMount阶段,Vue实例的$el 和 data 已被建立响应式关联,但还未挂载到 DOM 上。在mounted阶段,$el 已被挂载到 DOM 上了。

3. 运行阶段:在beforeUpdate和updated阶段调用。这两个钩子函数会在虚拟 DOM 重新渲染和打补丁之前和之后运行。

4. 销毁阶段:在beforeDestroy 和 destroyed 阶段调用。这两个钩子函数会在实例销毁之前和之后调用。

常用的生命周期钩子函数有:

- created():实例创建完毕,此时 data 与 methods 已被建立,但$el 还不存在。常用于异步操作的初始化。

- mounted():模板已经渲染到页面中,可以执行 DOM 操作。常用于异步操作的触发。

- updated():响应式数据更新时会调用,但是页面中的 DOM 结构还没有改变。可以在这里预先获取最新的 DOM 数据并处理。

- destroyed():Vue 实例销毁后调用。在这一步,Vue 实例指示的所有东西都会解绑定和销毁。常在这里做一些收尾工作,解绑定自定义事件等。

- beforeDestroy():实例销毁之前调用。在这一步,实例仍然完全可用。常用于销毁前的一些收尾工作,比如清除定时器或解绑定自定义事件等。