翻译进度
7
分块数量
2
参与人数

深入了解 Vue.js 源代码(#1)
0

这是一篇协同翻译的文章,你可以点击『我来翻译』按钮来参与翻译。

1

本系列教程主要是深入 Vue.js 源码进行介绍基本的 JavaScript 知识。尽量做到把概念拆成 JavaScript 初学者都可以接受的级别,有关本系列教程发布计划以及更多信息,可查看 该文章。 有关该系列进度的更新,请关注 twitter。该系列的所有教程目录,可查看 该文章

科大大 翻译于 4个月前

Vue 构造函数

从 Vue 实例来开始学习 Vue.js 源码是再适合不过的了,Vue.js 文档中 解释到,「每个 Vue 应用程序都是通过 Vue 构造函数创建一个新的实例开始的。」

在 Vue.js 源码中是这样通过构造函数创建实例的:

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}
科大大 翻译于 4个月前

对象构造函数 相当于是创建对象的模板,它的命名通常以大写字母开头:

function Vue (options) {
[. . . .]
}

你也可以使用 new 关键字像以下这样创建该构造函数的实例:

var vm = new Vue({
  // options
})

调用构造函数然后返回一个新的对象,this 关键字指的就是这个返回的新对象。

科大大 翻译于 4个月前

Vue 构造函数接收一个 参数: options。

function Vue (options) {
[. . . .]
}

Vue 构造函数使用 if 表达式判断当前环境是不是测试环境:

[....]
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
[....]

如果当前环境是生产环境,&& 短路运算为false, 其余部分就不用执行了。

科大大 翻译于 4个月前

如果你正在开发环境中运行,构造函数会使用 instanceof 检查 this 是否是 Vue 的实例。

[....]
  if (process.env.NODE_ENV !== ‘production’ &&
    !(this instanceof Vue)
  ) {
    warn(‘Vue is a constructor and should be called with the `new` keyword’);
  }
[....]

如果是开发环境中而且 this 不是 Vue 实例,然后会调用 warn 方法并 传递一个字符串作为该方法的参数,来通知开发者 Vue 应该使用关键字 new 来调用:

[....]
  if (process.env.NODE_ENV !== ‘production’ &&
    !(this instanceof Vue)
  ) {
    warn(‘Vue is a constructor and should be called with the `new` keyword’);
  }
[....]

我们会在另一篇文章中了解到 warn 函数的实现细节,如果你认真观察,你会看到在 warn 函数单引号里面会使用 ` 引号:

warn('Vue is a constructor and should be called with the `new` keyword');
科大大 翻译于 3个月前

在单引号中使用 ` 引号可以防止字符串被截断。

在最后,Vue 会调用 this._init 方法并把 options 参数传递进去:

function Vue (options) {
  [....]
  this._init(options);
}
科大大 翻译于 3个月前

But wait a second. Where is the ._init method defined on the this
object? As we have seen, it is not defined within the object constructor function call. A quick search of the source code reveals that the ._init method is added to Vue.prototype within a separate function named initMixin

We will take a look at initMixin next time. If you like the series and want to motivate me to keep working through it, clap, follow, respond, or share to your heart’s content.

Next Post:

A deep dive in the Vue.js source code (#2): the initMixin function

本文章首发在 Vuejs 知识社区
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

参与译者:2
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!