美文网首页
关于vue的生命周期函数

关于vue的生命周期函数

作者: 牛会骑自行车 | 来源:发表于2021-07-08 19:59 被阅读0次

beforeCreate ---- 除了一些生命周期函数和默认事件,别的啥都没有。
created ---- 实例创建完成即调用;data和methods初始化完成,可以操作和调用
beforeMount ---- 模板编译已经完成,但还没挂载到页面中
mounted ---- vue实例初始化完成,组件进入到运行阶段;el已被vm.$el替换,并被挂载到实例上
beforeUpdate ---- data已经更新,但页面中的数据还是旧的
updated ---- 数据和页面都更新完毕
beforeDestroy ---- 组件销毁以前(清空定时器)
destroyed ---- 组件销毁完成

第一次页面加载后,会触发前四个函数。

created和mounted的区别:
created在模板渲染成html前调用,即初始化某些属性的值,再渲染成视图;只有数据,没有页面。
mounted在渲染成html后调用,页面初始化完成后,对html和dom节点进行操作。

如果硬!硬要!硬要在created中操作dom的话,可以使用$nextTick。
我基础不好,所以太专业的话不会说。不过大概就是一个延迟执行的函数~里面的代码块会在页面渲染完以后才执行。

除了上面那八个常规生命周期函数,还有两个不走寻常路的哈哈哈哈哈
是被<keep-alive />组件包裹住的内容,它们以上那八个生命周期函数,但它们会多两个新的生命周期函数。一个是activated(代表激活),一个是deactivated(代表停止)。

相关文章

  • Vue学习笔记(12)-生命周期函数

    生命周期函数 生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以...

  • 😄--前端面试整理--VueJs

    1、Vue的指令都有哪些? 2、Vue的生命周期函数 3、除了生命周期函数还有哪些钩子函数 4、Vue组件是怎么进...

  • vue生命周期

    学习vue的生命周期 什么是生命周期函数? vue的生命周期函数(又称为钩子函数)是一个vue实例从开始创建,到初...

  • Vue生命周期函数调用的时间

    vue的生命周期函数有11个,常用的8个生命周期函数必须要掌握

  • vue基础知识精讲

    一、Vue实例生命周期函数 生命周期函数是vue实例在某一个时间点会自动执行的函数。 测试一下: 二、Vue的模板...

  • 了解vue.js的生命周期函数

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 具体代码文件 四个生命周期函数 beforeCr...

  • Vue 生命周期

    生命周期函数 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数 简单来说就是,钩子(生命周期函数)就好...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • vue的生命周期

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 四个周期函数: beforeCreate :第一...

  • vue.js 生命周期

    Vue实例 生命周期函数流程 —— beforeCreate、created、beforeMount、mounte...

网友评论

      本文标题:关于vue的生命周期函数

      本文链接:https://www.haomeiwen.com/subject/vszjlltx.html