Vue.js – 基础原理

  • A+
所属分类:JavaScript

 

前言

本文将从官网的例子讲起,一步步对Vue.js的实现做讲解说明。

请注意下列事项:

  • 本文适合于使用了Vue.js一段时间,想进一步深入和对其实现原理有兴趣的人。
  • 本文基于1.0.13版本。
  • 本文较长,包含了部分vue.js源代码,删除了所有的警告信息(对本文来说没有任何的作用,而且影响阅读)和部分注释。
  • 文中对代码的注释做了部分翻译,以供阅读。
  • 作者是不写冒号主义者,可能会引起部分人的蛋疼。
  • 需要有ES6的知识作为基础。
  • 需要理解原型。
  • 文是我边看边写的。
  • 水平有限,如有错误请指出。

例子

下面是官网的例子,可以在上面直接看到执行的情况。接下来我们将会以这段代码做开头。

首先

我们可以从上面的代码得到一些信息。从js来看,我们是new了一个Vue实例,提供了一个el和一个data。el是为了和html做映射,data则是本身涵盖的数据。再看看html,id用于映射,{{message}}是数据的显示,input的值作为message的model。

这样html和js根据一个id做出了映射关系,并将data和html做了双向的关联,这就是典型的MVVM模式。即Modle、View和ViewModel。

现在

我们需要看看这之中的执行过程到底发生了什么。

对此,我们需要查看源代码。因为项目的组织是基于ES6的模块方式组织的,所以寻找和阅读并不是很困难。让我们先找到这个入口。

在vue/src文件夹里我们可以很容易的找到index.js文件,看起来这个就是入口。

好吧,似乎vue/src/instance/vue.js才是真正的本体。

我把import部分和部分注释删掉了,影响阅读。额,这个Vue构造函数里似乎只是执行了一个_init函数用来处理options,所以我们要接着找。

这个我们简单的全局搜一下就可以了,然后定位到vue/src/instance/internal/init.js。一看这个代码,我们就知道重点来了。

这个文件export了一个函数,看看vue/src/instance/vue.js我们就能知道其实就是initMixin这个函数。所以init就是在这个函数里被赋值的,我们直接看代码,这样会比较直观。

PS

  • 我希望SF支持ES6代码渲染。
  • 请纠错。
weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: