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中生命周期混入的方法,不过这个我们不放在这里讲,我们放到后面再说;

学无止境,谦卑而行.

目录
相关文章
|
6天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
13天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
13天前
|
JavaScript 前端开发
[译] 复用 Vue 组件的 6 层手段
[译] 复用 Vue 组件的 6 层手段
|
1天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
186 62
|
13天前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
14天前
|
缓存 监控 JavaScript
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
该文章是《vue从安装到熟练 2022流畅无痛版》系列的第一季入门篇,介绍了Vue的基本概念、环境配置、项目创建与运行,并通过修改HelloWorld.vue和App.vue文件内容展示了如何在页面上显示"Hello World",最后还提供了Vue官方文档链接和介绍了Vue的常用内置指令和模板语法等基础知识。
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
|
1天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
19 10
|
1天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
10 8
|
1天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件
|
5天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
39 11
下一篇
DDNS