Vue.extend

Question

在初始化时会合并 构造函数上定义的一些全局属性 和 new Vue()接受的options

vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),
  options || {},
  vm
)

这个通过extend方法生成的基类 存有一份Vue.options的引用, 这里判断了是否修改了, 这样的场景有用到过吗？

关于这里的缓存 不怎么理解, 全局搜源码 就这里设置了一次Vue.cid 且值为0， 每次使用Vue.extend时接受的也是一个新对象， 这里是在缓存哪个构造函数呢

在global-api/index.js 中 , 在options中设置了一个属性指向构造函数本身

  Vue.options._base = Vue

这样可以一直访问下去，虽然知道 window对象也可以一直.window 访问， 但是对这样写还是有点疑惑。

现在看Vue2.x版本的代码 会不会有一点 '落后了’呢？ 源码内容很多，有些可能是相对没那么重要的,不用花费很多时间。 除了响应式系统, vnode这些 还有哪些内容是必看的？

Answer 1

好帮手慕小李 2025-02-12 17:13:47

1. 通过 extend 方法生成的基类存有一份 Vue.options 的引用

在 Vue.js 中，使用 Vue.extend 创建的组件构造器会继承 Vue.options。这是 Vue.js 允许组件扩展和复用功能的一种方式。当你通过 Vue.extend 创建一个新的组件时，这个新组件会继承 Vue 的所有选项（如 props、methods 等），并允许你添加或修改这些选项。

场景应用

这种机制非常有用，特别是在创建可复用的组件库时。你可以创建一个基础组件，然后通过 Vue.extend 创建多个扩展组件，每个组件都可以有自己的特定选项，同时继承基础组件的选项。

2. 缓存机制

在 Vue.js 中，Vue.cid 是一个全局唯一的 ID 生成器，用于确保每个组件实例都有一个唯一的标识。每次调用 Vue.extend 时，都会生成一个新的组件构造器，并为其分配一个唯一的 cid。这个 cid 用于缓存组件的扩展选项，以便在后续的扩展中重用这些选项，从而提高性能。

缓存的构造函数

缓存的实际上是组件的扩展选项，而不是构造函数本身。通过 cid 可以快速查找到已缓存的选项，避免重复处理相同的选项。

3. 全局选项的引用

在 global-api/index.js 中，Vue.options._base = Vue 这行代码确保了你可以通过 Vue 本身访问到 Vue 的基础选项。这在内部实现中非常有用，比如在解析组件选项时，需要访问基础 Vue 的选项作为默认值。

4. Vue 2.x 源码的学习价值

虽然 Vue 3 已经发布，但学习 Vue 2.x 的源码仍然非常有价值，特别是对于理解 Vue.js 的核心概念和机制。以下是一些必看的内容：

• 响应式系统：理解 Vue 如何追踪数据变化并更新视图。

• 虚拟 DOM（VNode）：了解 Vue 如何使用虚拟 DOM 来优化真实 DOM 的操作。

• 组件生命周期：掌握组件从创建到销毁的整个过程。

• 模板编译：了解 Vue 如何将模板编译成可执行的渲染函数。

• 事件系统：学习 Vue 如何处理事件冒泡和事件监听。

• 指令系统：理解 Vue 的指令（如 v-if、v-for 等）是如何工作的。