【译】Vue源码学习(一):Vue对象构造函数
本系列文章详细深入Vue.js的源代码,以此来说明JavaScript的基本概念,尝试将这些概念分解到JavaScript初学者可以理解的水平。有关本系列的一些后续的计划和轨迹的更多信息,请参阅此文章。有关本系列的文章更新进度的信息,请关注我的Tweeter。本系列的文章目录,请查看该链接。
Vue对象构造函数
Vue实例是深入了解Vue源代码的一个基本点。正如Vue官方文档所说那样,“每个Vue应用程序都是通过使用Vue函数创建一个新的Vue实例来开始的。”
在Vue的源码中,一个新的Vue实例是使用Vue对象的构造函数创建的。
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);
}
一个对象的构造函数是创建其他对象的一个蓝本。对象构造函数按约定通常是以大写字母开头。
function Vue (options) {
[. . . .]
}
通过new关键字来调用一个对象构造函数。例如,你应该会按一下方式调用Vue构造函数:
var vm = new Vue({
// options
})
调用对象构造函数会返回一个新的对象,并且将this关键字指向为返回的对象。
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,其余的表达式则不执行。
如果是在开发环境,对象构造函数会检查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函数并传入一个字符串作为一个参数,通知开发者使用new关键字将Vue作为构造函数来调用。
[....]
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');
在单引号中间使用勾号明显的好处是具有防止引用过早结束。
最后,Vue构造函数调用方法this._init 并且传入参数options
function Vue (options) {
[....]
this._init(options);
}
但等一下,_init方法在this对象中哪里定义的?正如我们所见,这个方法并没有定义在构造函数中。快速查找源码可以发现该._init在一个名为initMixin的单独函数中加到了Vue.prototype中。
我们下次再详细介绍initMixin。如果你喜欢这个系列,并想激励我继续努力,鼓励,跟随,回应或分享你的内心。
下一篇:initMixin函数
(END 2019/05/19)
原文链接
https://medium.com/@oneminutejs/a-deep-dive-in-the-vue-js-source-code-fd9638c05c05
【译】Vue源码学习(一):Vue对象构造函数的更多相关文章
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- vue 源码学习三 vue中如何生成虚拟DOM
vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._ ...
- Vue源码学习一 ———— Vue项目目录
Vue 目录结构 可以在 github 上通过这款 Chrome 插件 octotree 查看Vue的文件目录.也可以克隆到本地.. Vue 是如何规划目录的 scripts ------------ ...
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
- Vue源码学习(一):调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- 最新 Vue 源码学习笔记
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
随机推荐
- linux共享文件 - samba 服务器
1.Samba 服务器 客户端 yum 安装: # yum install samba samba-client -y 2.samba 配置文件配置 /etc/samba/smb.conf [glo ...
- npm 删除指定的某个包以及再次安装
npm uninstall xxxx --save-dev //删除包及删除配置项 npm install xxx@version //安装指定版本 npm install //覆盖
- Node.js 自学之旅(初稿篇)
学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...
- 【概率论】5-7:Gama分布(The Gamma Distributions Part II)
title: [概率论]5-7:Gama分布(The Gamma Distributions Part II) categories: - Mathematic - Probability keywo ...
- 洛谷P1288取数游戏2
题目 博弈论. 考虑先手和后手的关系.然后可以通过统计数值不是0的数的个数来得出答案. \(Code\) #include <bits/stdc++.h> using namespace ...
- pycharm通过pytest运行报错:No test were found 解决
今天写代码犯了一个不应该犯的小错误,通过记录下来便于查看 1.报错代码如下: platform win32 -- Python 3.7.3, pytest-4.0.2, py-1.8.0, plugg ...
- Django重定向你是如何实现的?用的什么状态码?
使用HttpResponseRedirect redirect和reverse 状态码:302,301
- hadoop错误记录部分总结
错误记录与分析 错误1:java.net.BindException: Port in use: localhost:0 datanode节点启动时报错 日志信息如下: Exiting with st ...
- Linux 搜索查找类指令
一.find 指令 find 指令将从指定目录向下递归遍历其各子目录,将满足条件的文件或者目录显示在终端. 基本语法 find [搜索范围] [选项] 选项说明 -name ...
- 常用的maven仓库地址
maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/http://repository.jboss.com/maven2/http://repository. ...