VUE中的生命周期、每个生命周期可以干什么

生命周期

就VUE来说就是一个程序的即将创建到销毁的一个过程,也就是vm对象实例从创建到最终销毁的过程。

VUE生命周期4个阶段8个钩子函数(到某一阶段自动调用的函数)

VUE中的生命周期、每个生命周期可以干什么_第1张图片

1.初始阶段(虚拟的DOM生成)

beforeCreate()

初始化事件对象和生命周期,这时候调用beforeCreate()调用完以后进行初始化数据代理和数据检测的创建。这时候data还没创建无法访问data中的数据。
作用:可以在这时候加一些loading效果

created()

已经完成了初始化数据代理和数据监测可以访问data中的数据。
作用:结束loading效果,也可以发哦那个网络请求,获取数据,可以在这里添加定时器。

2.挂载阶段(真实DOM的生成)

beforeMount()

在这个函数内去操作DOM元素无法不生效。

Mount()

在这个函数内去操作DOM元素可以生效。到这里页面的初次渲染就结束了。
作用:可以操作页面的DOM元素。

3.更新阶段(只有data中的数据变化了才会进入这个阶段)

beforeUpdate()

data中数据已经变化了但是页面还没有变化就会调用这个钩子函数。
作用:适合再更新之前访问现有的DOM,移除一些已经添加的事件监听器。

Update()

data中的数据变化了页面也变化了就会调用这个钩子函数。
作用:适合页面更新后,对数据做统一的处理

4.销毁阶段(只有执行this.$destroy()方法才会执行)

这里销毁是vm上绑定的数据检测数据代理之类的属性,销毁的不是vm实例,vm实例依然存在。

beforeDestroy()

其实成为解绑更为合理,解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之前做的事情。重点就是以上的都还未解绑还存在但是已经不可用了。
作用:适合做清除定时器。

Destroy()

解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之后做的事情

你可能感兴趣的:(vue.js,前端,javascript)