vue生命周期

什么是vue生命周期?
每个实例在被创建时都要经过一系列的初始化过程–例如:需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

生命周期图
vue生命周期_第1张图片vue生命周期可以分为如下几个阶段:创建前/后挂载前/后更新前/后销毁前/后

beforeCreate:组件创建之前执行的函数,此时data、methods中还未初始化,所以不能使用data中的数据和methods中的方法。
created:组件创建完成,data、methods初始化完毕,可以使用data中的数据和methods中的方法。
beforeMount:组件挂载前,template模板已经编译完成,但尚未渲染在页面中,页面还是旧的(上一个状态)。
mounted:挂载完成,页面渲染完成,用户可以看到渲染好的页面了,可以进行DOM操作了。
beforeUpdate:当数据发生变化,虚拟DOM重新渲染之前执行的函数,此时界面还未更新,页面尚未和最新数据保持同步。
update:页面更新显示。
beforeDestroy:组件销毁之前,所有的data、methods、指令均可用,可以在此时移除定时器,为组件销毁做准备。
destroyed:组件销毁之后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

页面第一次加载时会执行哪些函数呢??
页面首次加载会执行:beforeCreatecreatedbeforeMountmounted这四个生命周期,所以我们一般在created阶段处理http请求获取数据或者对data做一定的处理, 我们会在mounted阶段操作DOM,比如使用jquery,或这其他第三方dom库。

你可能感兴趣的:(VUE)