大白话理解Vue生命周期

192 阅读1分钟

1) beforeCreate()

实例Vue了 还没有进行data初始化和响应式处理

2) created()

data初始化和响应式处理,可以访问和修改数据

3) beforeMount()

render函数被调用,生成虚拟DOM,但是还没有转成真实的DOM并替换到el

4) mounted()

真实DOM挂载完毕

5) beforeUpdate()

形成一个新的虚拟DOM,但是还没有与之前的虚拟DOM进行对比打补丁。

6) updated()

新旧DOM比较补丁后,进行真实的DOM更新

7) beforeDestory()

实例销毁时调用此函数数据还可以访问

8) destoryed()

销毁实例后调用,对应的Vue实例所有的指令解绑,监听方法移除,子实例销毁

组件生命周期

父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy--> 子组件destroyed --> 父组件updated