Vue生命周期的理解

vue生命周期:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

beforeCreate:刚开始初始化实例,拿不到任何实例

created:初始化实例后立即执行,已完成了对数据的观测、属性方法的计算、事件的监听回调等等,但此时还没有进行挂载,也就是说$el对象还拿不到

beforeMount:挂载之前调用,render首次被调用,依旧拿不到真实的dom元素

mounted:dom初始化渲染完成,但也只是能拿到初始化数据里的dom元素,异步对dom的操作只能在update里获取

beforeUpdate:数据更新后触发的钩子函数,在这个函数里拿到的是更新前的数据,可以在这里进一步修改数据,并不会重新才触发重新渲染

updated:dom根据data更新并重新渲染完成后触发,个人很少用,因为首先来说,updated是更新一次数据就执行一次,业务中很多都是数据多次更新才得到最后的结果,在这里使用做一些dom操作很容会多次触发。另外:这里dom的data对象已经更新,可以做一些依赖于dom的操作,但是不能对data进行修改,否则就会不断调用beforeUpdate、updated,陷入死循环!!!

ps:updated,watch和nextTick区别

updated对所有数据的变化进行统一处理

watch对具体某个数据变化做统一处理

nextTick是对某个数据的某一次变化进行处理

beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用

destroyed:vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 面试官:你对vue生命周期的理解? 一、生命周期是什么 生命周期(Life Cycle)的概念应用很广泛,特别是在...
    梦Sir阅读 6,014评论 0 3
  • 说到Vue,现在大部分前端开发者都会有很多话要说。不同的人不同的哈姆雷特。今天我就来说说自己对Vue中部分知识点的...
    HeartofSpirit阅读 3,369评论 0 1
  • vue生命周期的理解 生命周期是什么? Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、...
    Find_Your_Way阅读 5,941评论 0 0
  • 生命周期钩子函数: 常用的有8个(生命周期不仅仅是8个),都是成对出现。 分别为:创建前/后,载入前/后,更新前/...
    Grit_1024阅读 3,192评论 0 4
  • 一、生命周期概念 首先,每一个vue实例都有一个完整的生命周期,主要分为五个阶段:创建、初始化、渲染、运行、销毁。...
    益码凭川阅读 7,606评论 0 0

友情链接更多精彩内容