• 欢迎光临~

Vue生命周期

开发技术 开发技术 2022-10-19 次浏览

Vue生命周期

生命周期就是我们从开始创建vue实例到销毁的一个过程,这一过程就叫做生命周期。方便我们在vue的各个阶段对其属性进行操作

生命周期示例

-----new Vue 实例化Vue对象 开始初始化主要的生命周期函数

  • beforeCreate 创建前 主要的生命周期函数初始化完成
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
//在beforeCreate前调用了三种方法,分别是初始化生命周期函数,初始化时间,
initLifecycle //查找当前组件的非抽象父组件进行vm.push。
initEvents(vm)//  定义$once、$off、$emit、$on函数
initRender(vm)//封装createElement函数,方便后期创建
  • created 创建后 可对data和method属性进行操控

------开始编译Vue指令,同时在内存中渲染HTML结构(将模板与数据编译成浏览器可读的HTML),最终得到render函数

  • beforeMount 将要渲染到页面上
beforeMount() {
        console.log(document.getElementById("h3").innerHTML)
}
//此刻获取到的是真实DOM页面上  未经过渲染的模板字符串:{{msg}}
  • mounted 页面 挂载完成 可以对dom节点进行操作

    vue mounted 只执行一次

《-------如果data有更新,循环执行以下阶段

  • beforeUpdate 此刻data数据发生变化,vue的虚拟dom树被重新构建,利用diff算法进行新旧两个dom树对比之后重新渲染
  • updated 页面已经完成更新,重新渲染虚拟DOM结构
//所有的数据变化都会调用   在更改data并且确定要对其进行渲染时才会调用updated

《 -------

  • beforeDestroy vm即将被销毁,但此时还可以正常工作

-----正在销毁

  • destroyed 销毁完成
程序员灯塔
转载请注明原文链接:Vue生命周期
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com