java实现rc4带简单界面_手把手带你实现一个简单的 Vue（一）

简易模型

上古时代， 数据到视图的映射主要通过手写操作DOM的代码实现。

通过这样的方式，程序员可以细粒度的控制节点， 数据以及渲染规则。然而这种方式不够抽象，消耗了过多的重复劳动力。

于是有了最初的简易映射模型

这种模型，通过定制一种通用的渲染规则， 并且实现这种规则的渲染器Render，将Model和View渲染为HTML

具体到代码层， 就是通过render（函数），将 model（数据对象）和 template（模板字符串）渲染（字符串拼装替换）为最终的输出结果。这是早期MV分离的简易方式。

我们可以先来实现一个简易的demo， 把代码写得像vue一点

<

// 把刚刚的简易模型封装成Vue的样子

在这个简易模型中，我们实现了rende函数， 当然这与vue当中的渲染流程差距甚远。但是不要紧， 我们先从简单的模型开始，一点一点的丰富它。

自动更新

上面的模型， 已经可以完成页面的第一次渲染。然而页面并不会根据数据的变化而变化。

最简单的自动更新思路是， 有一种方法能够监测到数据发生了变化， 然后触发render执行。

react采用的是自实现赋值方法来监听数据改动，像这样

// ...

vue采用的是Object.defineProperty这个API，通过修改对象默认的setter方法，来实现自动触发渲染。除此以外， 利用Proxy可以更简单的实现类似效果， proxy的兼容性更差，所以没有成为Vue的方案，既然是自建模型，可以先用Proxy来实现试试看

class 

完成代码请看DEMO

如上，我们通过实现了render和observe两个函数，分别完成了页面渲染，和自动更新。得到了一个类似Vue的玩具模型。

下一章，我们将继续完善我们的模型.