本系列是一个教程，下面贴下目次~
1.手把手教你从零写一个简朴的 VUE
2.手把手教你从零写一个简朴的 VUE–模板篇

本日给人人带来的是完成一个简朴的相似 VUE 一样的前端框架，VUE 框架如今应当算是异常主流的前端数据驱动框架，本日我们来从零最先写一个异常简朴的 VUE 框架，主假如让人人晓得最中心的 vue 部份是怎样运转起来的。包括数据绑定，模板处置惩罚，以及页面衬着，数据驱动视图等几个部份，代码在文章末端给出来，下面我们最先~

VUE 是怎样运转起来的

在正式着手之前，我们先来了解下 vue 是怎样运转起来的，vue 从中心来讲，是一个经由过程数据去驱动页面衬着的框架，也就是说经由过程转变数据的状况，可以掌握页面中衬着的逻辑，比方展示数据，切换款式，这些的中心都是经由过程对数据转变的监听，从而将数据发作转变的对应的视图举行更新衬着，这是全部框架的中心运转机制。因而我们制造的简朴 vue 框架，主假如围绕着怎样监听，怎样衬着，怎样更新这个流程去做的，旨在让人人晓得 vue 怎样跑起来的，其他的 vue 组件，指令，插件等内容将在背面的文章中写出。

设想

起首我们要晓得我们要做一个简朴数据驱动视图前端框架，它包括以下几个部份:

1. 可以编译简朴的模板
2. 可以监听数据变化
3. 数据变化的时刻，可以关联对应的视图并同步的更新视图

依据上面枚举的需求，我们须要顺序笼统以下几个部份:

1. 存储数据的$data,用于保留数据，衬着视图
2. 与每一个模板对应的Node对象，对象包括对应模板的衬着函数，另有衬着函数须要运用的数据鸠合
3. 对数据举行监听关联的Watcher类，用于关联数据和对应的模板，监听数据变化

最先编码

起首引见下项目用的东西及框架，项目运用rollup举行项目模块化构建,运用ES6举行编码。下面最先正式编码。
起首我给框架起了个简朴的名字，叫QV，这个对象会暴露到全局中，举行实例化，实例化代码以下:

在实例化的时刻传给了对象 el、template、data等数据，个中el是模板在页面的挂载点，template 是猎取模板的选择器，离别对应body的<app></app>标签和script标签中的模板，data 是定义的数据对象。

数据处置惩罚

在QV类的组织函数中，我们会对传入的设置举行处置惩罚，起首我们会对数据举行格式化，使得其在被Watcher一般监控。格式化数据的代码以下：

可以看到formatData要领在本来的data上面又挂载了一个_od_属性，然后将原始数据举行格式化，每一个数据离别包括value(数据值),linkNodes(被运用的节点值),mounted(是不是已被格式化过)，经由过程对数据举行预处置惩罚，轻易背面的数据监控绑定

模板节点处置惩罚

模板的才能是一个前端框架的主要组成部份，vue将模板转化为AST（笼统语法树），然后去剖析个中的语法，比方{{}}、v-for v-if等等，模板剖析的整体思绪以下:

1. 将模板字符串经由过程正则表达式等要领举行切割，切割点为模板定义的关键字
2. 将切割完的字符串举行剖析，可以天生AST(笼统语法树)或许是直接举行处置惩罚操纵
3. 将剖析完的东西举行字符串拼接，经由过程new Function天生模板函数

本例子只做流程的申明，所以模板很简朴，只要赋值语法，以下:

可以看到模板中只要{{}}的赋值语法，插进去变量为a、sdf、ccc的语法
那末这个是怎样举行剖析的呢，代码以下:

下面重点讲一讲这个函数，可以看到函数的开首定义了一个正则表达式 /{{[ \t]*([\w\W]*?)[ \t]*}}/g,用于婚配和支解用{{}}界定的变量,经由过程 exec的运转，婚配出来的效果以下:

可以看到a,sdf,ccc都被婚配出来了，然后经由过程slice举行支解后重修，变成一段模板函数字符串,以下：

然后再经由过程new Function将上面的字符串变成一个函数,要领以下

个中的new Function("od",$t)中的od是这个函数的参数，可以在函数中运用
末了天生的模板函数以下：

这模样就完成了模板函数的开辟，而且还将模板用的变量举行抽取，标记这个模板用到了哪些变量

监听器

监听器作为衔接数据和视图更新的纽带，是vue的中心部份，vue是运用Object.defineProperty对数据举行处置惩罚后完成数据监听的，本顺序也是运用这个中心要领举行数据监听的，中心代码以下：

下面我详细说下这段代码：
之前格式化数据的时刻在原始数据内里添加了_od_字段，是用在数据监控时刻的，Object.defineProperty可以设置get set属性，离别在对应的数据被猎取或许被修正的时刻会举行回调，因而假如直接操纵原始数据，会致使监控顺序发作死循环，因而经由过程_od_的拷贝数据举行操纵，可以防止这类状况，可以看到get函数会直接返回_od_内里对应属性的value，而set函数我做了一个优化撙节，关于一连修正数据只发作一次更新，将运用到这个数据的Node对象举行update操纵

顺序最中心的要领已开辟完成了，演示下效果，直接翻开页面，可以看到下面的视图

可以看到顺序将数据a sdf ccc赋值给模板，然后替代页面的app节点，衬着到页面上
接下来我们经由过程实例直接修正data，
qv.$data.a = "change data a"
可以看到页面会更新成为

下面说下从新衬着的流程：

1. 数据修正以后触发了Object.defineProperty的set要领，要领检测到设置数据与原数据差别，归去猎取linkNodes属性，内里包括了运用这个数据的Node节点，然后离别挪用Node节点的update要领
2. update要领被挪用以后，Node会从新猎取data去天生dom元素，然后替代现有的模板元素，至此完成一次更新

结语

这篇文章的例子旨在跟人人申明Vue是怎样运作的，愿望可以协助到人人在一样平常运用的时刻碰到一些坑，可以从基础道理上面去找缘由，固然这个demo 离Vue照样异常不完整的，缺少了种种模板语法，指令，事宜绑定，组件体系，只是把中心的流程展示出来，愿望人人喜好

末了附上源码 点我点我，喜好的话给个 star 呗~~