vue的生命周期init
时间: 2023-10-21 21:35:51 浏览: 32
Vue 的生命周期中没有 `init` 这个阶段,可能是你理解错了。Vue 的生命周期分为以下几个阶段:
1. `beforeCreate`: 在实例初始化之后,数据观测和 event/watcher 事件配置之前被调用。
2. `created`: 实例已经创建完成之后被调用,在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前尚不可用。
3. `beforeMount`: 在挂载开始之前被调用:相关的 render 函数首次被调用。
4. `mounted`: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
5. `beforeUpdate`: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6. `updated`: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
7. `beforeDestroy`: 实例销毁之前调用。在这一步,实例仍然完全可用。
8. `destroyed`: Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有事件监听器会被移除,所有子实例也会被销毁。
相关问题
vue3父子组件生命周期
在Vue3中,父子组件的生命周期钩子的调用顺序如下:
1. 父组件beforeCreate
2. 父组件created
3. 父组件beforeMount
4. 子组件beforeCreate
5. 子组件created
6. 子组件beforeMount
7. 子组件mounted
8. 父组件mounted
9. 子组件beforeUpdate
10. 父组件beforeUpdate
11. 子组件updated
12. 父组件updated
13. 子组件beforeUnmount
14. 父组件beforeUnmount
15. 子组件unmounted
16. 父组件unmounted
在这个过程中,父组件的生命周期钩子会在子组件的钩子之前执行。父组件的生命周期钩子在父组件的模板渲染之前执行,而子组件的生命周期钩子在子组件的模板渲染之前执行。
需要注意的是,Vue3中的组件生命周期钩子名称发生了一些改变,例如beforeMount改为了beforeInit,mounted改为了onMounted,beforeDestroy改为了beforeUnmount。同时,Vue3还引入了一些新的生命周期钩子,onUpdated、onRenderTriggered、onRenderTracked等。
以上是父子组件生命周期钩子的基本执行顺序,具体的调用顺序可能会因为组件的嵌套关系和实际业务逻辑而有所不同。
vue2 _selfInit函数
`_selfInit` 函数是 Vue2 中的一个内部函数,用于初始化实例的各种属性和方法。它被定义在 `src/core/instance/init.js` 文件中。
具体来说,`_selfInit` 函数主要做了以下几个事情:
1. 设置实例的 `_uid` 属性,即实例的唯一标识符。
2. 设置实例的 `_isVue` 属性为 `true`,表示这是一个 Vue 实例。
3. 合并用户传入的 options 和全局的 options,生成最终的配置对象。
4. 初始化实例的生命周期相关属性,如 `_isMounted`、`_isDestroyed` 等。
5. 初始化实例的事件相关属性,如 `_events`、`_hasHookEvent` 等。
6. 初始化实例的渲染相关属性,如 `_vnode`、`_staticTrees` 等。
7. 调用 `callHook` 函数执行 `beforeCreate` 和 `created` 生命周期钩子函数。
总之,`_selfInit` 函数是 Vue2 实例初始化的一个重要环节,它确保了实例的各种属性和方法都被正确地初始化和设置。