Vue——initLifecycle【五】

简介: Vue——initLifecycle【五】

前言

前面我们简单的了解了 vue 初始化时的一些大概的流程,这里我们详细的了解下具体的内容;这块建议搭建可以根据 demo 进行 debugger 来观察;

内容

这一块主要围绕init.ts中的initLifecycle进行剖析。

initLifecycle

initLifecycle的方法位于scr/core/instance/lifecycle.ts中;

export function initLifecycle(vm: Component) {
  // 合并后的options
  const options = vm.$options
  // locate first non-abstract parent
  let parent = options.parent
  // 存在父级并且不是抽象组件(如:keep-alive、transition)
  if (parent && !options.abstract) {
    // 找到不是抽象组件的实例
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    // 将该实例推入父实例的$children数组中
    parent.$children.push(vm)
  }
  // https://v2.cn.vuejs.org/v2/api/#vm-parent
  // 父实例
  vm.$parent = parent
  // https://v2.cn.vuejs.org/v2/api/#vm-root
  // 如果当前实例没有父实例那实例就是自己
  vm.$root = parent ? parent.$root : vm
  // https://v2.cn.vuejs.org/v2/api/#vm-children
  // 当前实例的子组件,$children既不保证顺序也不是响应式的;
  vm.$children = []
  // https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0
  // 当 ref 和 v-for 一起使用的时候,你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组
  // $refs 只会在组件渲染完成之后生效,并且它们不是响应式的。
  // 避免在模板或计算属性中访问 $refs
  vm.$refs = {}
  // 如果父实例不存在那就赋予_provided空对象
  vm._provided = parent ? parent._provided : Object.create(null)
  // 初始化监听属性
  vm._watcher = null
  // 初始化active属性
  vm._inactive = null
  // 标记指令状态
  vm._directInactive = false
  // 标记mounted状态
  vm._isMounted = false
  // 标记destroyed状态
  vm._isDestroyed = false
  // 标记BeingDestroyed状态
  vm._isBeingDestroyed = false
}

?> 估计有朋友肯定发现了lifecycleMixin方法,这就是scr/core/instance/index.ts中生命周期混入的方法,不过这个我们不放在这里讲,我们放到后面再说;

学无止境,谦卑而行.

目录
相关文章
|
1天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
9 3
|
3天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
37 6
|
18小时前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
5 2
|
18小时前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具,使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令,可以提高开发效率,增强应用的功能和用户体验。
|
1天前
|
JavaScript
|
3天前
|
缓存 JavaScript 前端开发
Vue 中动态导入的注意事项
【10月更文挑战第12天】 在 Vue 项目中,动态导入是一种常用的按需加载模块的技术,可以提升应用性能和效率。本文详细探讨了动态导入的基本原理及注意事项,包括模块路径的正确性、依赖关系、加载时机、错误处理、缓存问题和兼容性等,并通过具体案例分析和解决方案,帮助开发者更好地应用动态导入技术。
|
3天前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
4天前
|
JavaScript 算法 前端开发
深入剖析Vue中v-for的使用及index作为key的弊端
深入剖析Vue中v-for的使用及index作为key的弊端
10 2
|
3天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
21 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
3天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
10 1