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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

你可能感兴趣的:(Vue生命周期的理解)