手撸一个 MVVM 不是梦

在实现 VUE 中 MVVM 的系列文章的最后一篇文章中说道：我觉得可响应的数据结构作用很大，在整理了一段时间后，这是我们的最终产出：RD - Reactive Data

ok 回到整理，这篇文章我们不研究 Vue 了，而是根据我们现在的研究成果来手撸一个 MVVM。

简单介绍 RD

先看看下我们的研究成果：一个例子

let demo = new RD({
    data(){
        return {
            text: 'Hello',
            firstName: 'aco',
            lastName: 'yang'
        }
    },
    watch:{
        'text'(newValue, oldValue){
            console.log(newValue)
            console.log(oldValue)
        }
    },
    computed:{
        fullName(){
            return this.firstName + ' ' + this.lastName
        }
    },
    method:{
        testMethod(){
            console.log('test')
        }
    }
})

demo.text = 'Hello World'
// console: Hello World
// console: Hello
demo.fullName
// console: aco yang
demo.testMethod()
// console: test

写法上与 Vue 的一样，先说说拥有那些属性吧：

关于数据

• data
• computed
• method
• watch
• prop
• inject/provied

关于生命周期

• beforeCreate
• created
• beforeDestroy
• destroyed

关于实例间关系

• parent

实例下的方法：

关于事件

• $on
• $once
• $emit
• $off

其他方法

• $watch
• $initProp

类下方法：

• use
• mixin
• extend

以上便是所有的内容，因为 RD 仅仅关注于数据的变化，所以生命周期就就只有创建和销毁。

对比与 Vue 多了一个 $initProp ，同样的由于仅仅关注于数据变化，所以当父实例相关的 prop 发生变化时，需要手动通知子组件修改相关数据。

其他的属性以及方法的使用与 Vue 一致。

ok 大概说了下，具体的内容可以点击查看

手撸 MVVM

有了 RD 我们来手撸一个 MVVM 框架。

我们先确定我们大致需要什么？

1. 一个模板引擎（不然怎么把数据变成 dom 结构）
2. 现在主流都用虚拟节点来实现，我们也加上

ok 模板引擎，JSX 语法不错，来一份。

接着虚拟节点，github 上搜一搜，ok 找到了，点击查看

所有条件都具备了，我们的实现思路如下：

RD + JSX + VNode = MVVM

具体的实现我们一边写 TodoList 一边实现

首先我们得要有一个 render 函数，ok 配上，先来个标题组件 Title 和一个使用标题的 App 的组件吧。

可以对照完整的 demo 查看一下内容，demo。

var App = RD.extend({
  render(h) {
    return (