本系列为教程，目录贴在下面~1.教你从零开始写一个简单的VUE2。手把手教你从零开始写一个简单的VUE--template今天给大家带来的是实现一个简单的类似于VUE的前端框架。VUE框架应该算是非常主流的前端数据驱动框架了。今天我们将从零开始编写一个非常简单的VUE框架，主要是让大家了解核心的vue部分是如何工作的。包括数据绑定、模板处理、页面渲染、数据驱动视图等部分，文末给出了代码，我们开始吧~VUE是如何工作的在开始之前，我们先来了解下Vue是如何工作的，当它工作时，vue其核心是一个通过数据驱动页面渲染的框架，也就是说，通过改变数据的状态，可以控制页面中渲染的逻辑，比如显示数据、切换样式等。这些的核心是通过监听数据变化，更新和渲染对应的数据变化视图，这是整个框架的核心运行机制。所以，我们做的这个简单的vue框架，主要围绕着怎么监控，怎么渲染，怎么更新进程。它旨在让每个人都知道vue是如何工作的。其余的vue组件、使用说明、插件等内容会在后面的文章中写到。设计首先，我们要知道我们要做一个简单的数据驱动的视图前端框架，包括以下几个部分：可以编译简单的模板可以监控数据变化当数据变化时，可以关联相应的视图并更新viewssynchronously根据上面的列表需求，我们需要程序抽象出以下部分：$data用于存储数据，用于保存数据，渲染视图和每个模板对应的Node对象，该对象包含渲染函数对应的模板，以及渲染功能需要使用的数据设置监听关联数据的Watcher类，用于关联数据和对应的模板，监听数据变化，开始编码。首先介绍项目中使用的工具和框架。该项目使用rollup进行项目模块化，使用ES6进行编码。让我们开始正式的编码。首先，我给这个框架起了一个简单的名字，叫做QV。这个对象将暴露给整个世界并被实例化。实例化代码如下：实例化时，传递了对象el、template、data等数据，其中el是模板在页面上的挂载点，template是获取模板的选择器，对应template分别在body的标签和script标签中，data是定义的数据对象。数据处理在QV类的构造函数中，我们会对传入的配置进行处理。首先，我们将数据格式化，使其能正常被Watcher监控。格式化数据的代码如下：可以看到formatData方法给原始数据挂载了一个_od_属性，然后格式化原始数据。每条数据包含value（数据值）、linkNodes（使用的节点值）、mounted（是否格式化过），通过对数据进行预处理，方便后续数据监控绑定模板节点。处理模板的能力是前端框架的重要组成部分。Vue将模板转换成AST（抽象语法树），然后解析里面的语法，比如{{}}，v-forv-if等，模板解析的大致思路如下：切分模板字符串通过正则表达式等方法，切点为模板定义的关键字对切出的字符串进行分析，可以生成AST（抽象语法树）或者直接进行处理操作，将分析出来的东西拼接成字符串，生成模板通过newFunction函数。这个例子只做了流程，所以模板很简单，只有赋值语法，如下：可以看到模板中只有{{}}赋值语法，插入变量是a,sdf的语法,ccc那么这个怎么解析呢，代码如下：下面重点说说这个函数。可以看到在函数的开头定义了一个正则表达式/{{[\t]*([\w\W]*?)[\t]*}}/g，用于匹配和拆分{{}}定义的变量，通过exec的运行，匹配结果如下：可以看到a、sdf、ccc都匹配上了，然后通过slice切分重建成为模板函数String，如如下：然后使用newFunction将上面的字符串变成一个函数。方法如下。newFunction("od",$t)中的od是这个函数的参数，可以在函数中使用，最终生成模板函数如下：这样，模板函数的开发就完成了，并提取模板中使用的变量，以标记本模板中使用了哪些变量。Listener监听器是vue的核心部分，作为连接数据和视图更新的纽带，Vue使用Object.defineProperty对数据进行处理，实现数据监控。本程序也采用这种核心方法进行数据监控。核心代码如下：下面具体描述一下这段代码：之前在格式化数据的时候，在原来的数据中添加_od_字段，用于数据监控。object.defineProperty可以设置getset属性，当相应数据被获取或修改时会回调，所以如果直接操作原始数据，会导致监控程序死循环，所以_od_的拷贝数为通过按照操作，这种情况是可以避免的。可以看到get函数会直接返回_od_中对应属性的值，我对set函数做了优化节流。连续修改数据只发生一次update，会用到这个数据的Node对象的update操作程序的核心方法已经开发好了，演示一下结果，直接打开页面，可以看到下面的视图，可以看到程序把dataasdfccc赋值给模板，然后替换页面Node上的app，渲染到页面上接下来，我们直接通过实例修改数据，qv.$data.a="changedataa"，可以看到页面会更新为如下重新渲染的过程：修改数据后，触发Object.defineProperty的set方法，该方法检测到设置的数据与原始数据不同，返回获取linkNodes属性，其中包含使用该数据的Node节点，然后调用Node节点的update方法。调用update方法后，Node会重新获取数据生成dom元素，然后替换已有的template元素，至此完成一次update，原理就是找原因。当然，这个demo从Vue来说还很不完整。它缺少各种模板语法、指令、事件绑定和组件系统。它只是展示了核心过程。我希望你喜欢它。最后附上源码给我点我，喜欢就给个star吧~~
