vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
DOM操作
mounted
数据修改
beforeMount created mounted
beforeCreate
el 和 data 并未初始化
此时data、watcher、methods统统滴没有。
created
data选项中的数据能获取到
但是取不到真实的DOM
数据观测(data observer) ,属性和方法的运算
此时 this.$data 可以访问,watcher、events、methods也出现了,若根据后台接口动态改变data和methods的场景下,可以使用。
可以在这个钩子函数里发请求,访问后端接口拿数据,完成数据的初始化
beforeMount
完成了 el 和 data 初始化
mounted
完成挂载
beforeUpdate
v m . d a t a 更 新 之 后 , 虚 拟 D O M 重 新 渲 染 和 打 补 丁 之 前 被 调 用 。 你 可 以 在 这 个 钩 子 中 进 一 步 地 修 改 vm.data更新之后,虚拟DOM重新渲染 和打补丁之前被调用。 你可以在这个钩子中进一步地修改 vm.data更新之后,虚拟DOM重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改vm.data,这不会触发附加的重渲染过程。
updated
虚拟DOM重新渲染 和打补丁之后被调用。
当这个钩子被调用时,组件DOM的data已经更新,所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data,否则会继续触发beforeUpdate、updated这两个生命周期,进入死循环!
vue渲染template的时间在beforeMount之后,mounted之前,
钩子函数的应用
beforecreate : 举个栗子:可以在这加个loading事件
created:在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情