|
|
@@ -68,7 +68,7 @@ props: {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-总之在被规范化后的 `props` 选项将会是一个对象，并且该对象每个属性的键名就是对应 `prop` 的名字，而且每个属性的值都是一个至少会包含一个 `type` 属性的对象。
|
|
|
+总之被规范化后的 `props` 选项将会是一个对象，并且该对象每个属性的键名就是对应 `prop` 的名字，而且每个属性的值都是一个至少会包含一个 `type` 属性的对象。
|
|
|
|
|
|
明白了这些我们就可以开始研究 `initProps` 函数了，找到 `initProps` 函数，该函数的开头定义了四个常量：
|
|
|
|
|
|
@@ -83,7 +83,7 @@ const isRoot = !vm.$parent
|
|
|
|
|
|
首先定义了 `propsData` 常量，如果 `vm.$options.propsData` 存在，则使用 `vm.$options.propsData` 的值作为 `propsData` 常量的值，否则 `propsData` 常量的值为空对象。
|
|
|
|
|
|
-那么 `vm.$options.propsData` 是什么呢？顾名思义 `propsData` 就是 `props` 数据，我们知道组件的 `props` 代表接收来自外界传递进来的数据，这些数据总要存在某个地方，使得我们在组件内使用，而 `vm.$options.propsData` 就是用来存储来自外界的组件数据的。
|
|
|
+那么 `vm.$options.propsData` 是什么呢？顾名思义 `propsData` 就是 `props` 数据，我们知道组件的 `props` 代表接收来自外界传递进来的数据，这些数据总要存在某个地方，使得我们可以在组件内使用，而 `vm.$options.propsData` 就是用来存储来自外界的组件数据的。
|
|
|
|
|
|
举个例子，如下是使用自定义组件并向组件传递数据的例子：
|
|
|
|
|
|
@@ -140,7 +140,7 @@ const props = vm._props = {}
|
|
|
const keys = vm.$options._propKeys = []
|
|
|
```
|
|
|
|
|
|
-定义了常量 `keys`，同时在 `vm.options` 上添加 `_propKeys` 属性，并且常量 `keys` 与 `vm.$options._propKeys` 属性具有相同的引用，且初始值是一个空数组：`[]`。
|
|
|
+定义了常量 `keys`，同时在 `vm.$options` 上添加 `_propKeys` 属性，并且常量 `keys` 与 `vm.$options._propKeys` 属性具有相同的引用，且初始值是一个空数组：`[]`。
|
|
|
|
|
|
最后一个常量为 `isRoot`：
|
|
|
|
|
|
@@ -148,7 +148,7 @@ const keys = vm.$options._propKeys = []
|
|
|
const isRoot = !vm.$parent
|
|
|
```
|
|
|
|
|
|
-`isRoot` 常量用来标识是否是根组件，因为根组件实例的 `$parent` 属性的值是不存在的，所以当 `vm.$parent` 为假时说明当前组件实例时根组件。
|
|
|
+`isRoot` 常量用来标识是否是根组件，因为根组件实例的 `$parent` 属性的值是不存在的，所以当 `vm.$parent` 为假时说明当前组件实例是根组件。
|
|
|
|
|
|
在这些常量的下面，是如下这段代码：
|
|
|
|
|
|
@@ -162,7 +162,7 @@ for (const key in propsOptions) {
|
|
|
toggleObserving(true)
|
|
|
```
|
|
|
|
|
|
-这段代码的重点在 `for...in` 循环语句块内，为了结构清晰如上代码中我们省略了 `for...in` 循环语句块内的代码。可以看到在 `for...in` 循环执行之前执行一段 `if` 条件语句块：
|
|
|
+这段代码的重点在 `for...in` 循环语句块内，为了结构清晰如上代码中我们省略了 `for...in` 循环语句块内的代码。可以看到在 `for...in` 循环执行之前执行了一段 `if` 条件语句块：
|
|
|
|
|
|
```js
|
|
|
if (!isRoot) {
|
|
|
@@ -330,7 +330,7 @@ if (!(key in vm)) {
|
|
|
proxy(vm, `_data`, key)
|
|
|
```
|
|
|
|
|
|
-所以这么做的目的就是在组件实例对象上第一与 `props` 同名的属性，使得我们能够通过组件实例对象直接访问 `props` 数据，但其最终代理的值仍然是 `vm._props` 对象下定义的 `props` 数据。另外我们要注意这里 `if` 语句条件：
|
|
|
+所以这么做的目的就是在组件实例对象上定义与 `props` 同名的属性，使得我们能够通过组件实例对象直接访问 `props` 数据，但其最终代理的值仍然是 `vm._props` 对象下定义的 `props` 数据。另外我们要注意这里 `if` 语句条件：
|
|
|
|
|
|
```js {1}
|
|
|
if (!(key in vm)) {
|
|
|
@@ -338,7 +338,7 @@ if (!(key in vm)) {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-只有当 `key` 不在组件实例对象上以及其原型链上有定义时才会进行代理，这是一个针对子组件的优化操作，对于子组件来讲这个代理工作在创建子组件构造函数时就完成了，即在 `Vue.extend` 函数中完成的，这么做的目的是避免每次创建子组件实例时都会调用 `proxy` 函数去做代理，由于 `proxy` 函数中使用了 `Object.defineProperty` 函数，该函数的性能表现不佳，所以这么做能够提升一定的性能指标。更多这部分的详细信息我们会在后面讲解 `Vue.extend` 函数及相关子组件创建时间的时候为大家详细说明。
|
|
|
+只有当 `key` 不在组件实例对象上以及其原型链上没有定义时才会进行代理，这是一个针对子组件的优化操作，对于子组件来讲这个代理工作在创建子组件构造函数时就完成了，即在 `Vue.extend` 函数中完成的，这么做的目的是避免每次创建子组件实例时都会调用 `proxy` 函数去做代理，由于 `proxy` 函数中使用了 `Object.defineProperty` 函数，该函数的性能表现不佳，所以这么做能够提升一定的性能指标。更多这部分的详细信息我们会在后面讲解 `Vue.extend` 函数及相关子组件创建时间的时候为大家详细说明。
|
|
|
|
|
|
最后我们再来看一下初始化 `props` 部分打印警告信息相关的内容，如下：
|
|
|
|
|
|
@@ -383,7 +383,7 @@ if (isReservedAttribute(hyphenatedKey) ||
|
|
|
|
|
|
首先使用 `hyphenate` 将 `prop` 的名字转为连字符加小写的形式，并将转换后的值赋值给 `hyphenatedKey` 常量，紧接着又是一个 `if` 条件语句块，其条件是在判断 `prop` 的名字是否是保留的属性(`attribute`)，如果是则会打印警告信息，警告你不能使用保留的属性(`attribute`)名作为 `prop` 的名字。
|
|
|
|
|
|
-上面代码中的 `hyphenate` 和 `isReservedAttribute` 还是都来自于 `src/shared/util.js` 文件，可以在附录 [shared/util.js 文件工具方法全解](../appendix/shared-util.md) 中查看讲解。
|
|
|
+上面代码中的 `hyphenate` 和 `isReservedAttribute` 函数都来自于 `src/shared/util.js` 文件，可以在附录 [shared/util.js 文件工具方法全解](../appendix/shared-util.md) 中查看讲解。
|
|
|
|
|
|
接着使用了 `defineReactive` 函数定义 `props` 数据：
|
|
|
|
yoshino