Vue 源码中的工具函数

前言

在 Vue 源码中，封装了很多工具函数，学习这些函数，一方面学习大佬们的实现方式，另一方面是温习基础知识，希望大家在日常工作中，简单的函数也可以自己封装，提高编码能力。

本次涉及的工具函数 1-16 在 Vue3 的源码中，路径是 core/packages/shared/src/index.ts。

17-22 在 Vue2 的源码中，路径是 vue/src/shared/util.ts。

1. EMPTY_OBJ 空对象

const EMPTY_OBJ = __DEV__
  ? Object.freeze({})
  : {}

注意：
Object.freeze 只能浅冻结，如果属性是对象，对属性的属性的修改就无法冻结了

const obj = {
    name: '张三',
    info: {
        a: 1,
        b: 2
    }
};
Object.freeze(obj);
obj.name = '李四';
console.log(obj); // { name: '张三', info: { a: 1, b: 2 } }
obj.info.a = 66;
console.log(obj); // { name: '张三', info: { a: 66, b: 2 } }

源码中的使用：

可以看出基本都是作为初始化或者兜底使用，由此产生疑问：

使用的地方有的是 options，有的是 props，不同地方用同一个对象，不会有问题么？
首先，很多初始化操作，后续都会重新赋值，EMPTY_OBJ 只是作为占位使用。其次，因为 Object.freeze 的原因，无法修改 EMPTY_OBJ，所以任何引用这个对象的地方，都不会受到影响。
为什么判断是 __DEV__（process.env.NODE_ENV !== 'production'）的时候才使用 Object.freeze？
Object.freeze 更多的是 Vue 源码开发者在调试时使用，可以通过报错，防止对空对象操作，更快发现源码问题。也因此，开发环境最终会避免了对 EMPTY_OBJ 的赋值操作，所以在生产环境使用 Object.freeze 意义不大。

Vue 源码中的工具函数

前言

1. EMPTY_OBJ 空对象

相关推荐