vue（一）

从MVC说起

任何模式的发明，都是由于人们疲倦与对相同过程的重复思考。大抵类似于，你愿意经历一次计算324x432=？这样的问题，但是如果让你计算一百遍，或者出一百道类似的题，你就会十分的厌倦。

朴素直接的做法

一开始，如果我们想要将数组以列表的形式展示在页面上，我们是这样做的:

<ul id="list"></ul>
<button id="more">加载更多</button>

var dom = document.querySelector('#list');
var data = ['apple', 'pen', 'chestnut'];
var html = data.map(item => {
    return `<li>${item}</li>`
}).join('')

dom.innerHTML = html;

这时候的思路是：

遍历数据-> 拼装html(渲染)->插入到页面上

然而，事情总不会那么简单美好，我们希望当用户点击【加载更多】的时候，能够用ajax获取到更多的数据，然后展示出来，于是变成了这样：

var dom = document.querySelector('#list');
var more = document.querySelector('#more');

more.addEventListener('click', function(e){
    // 加载数据  blablabla 
    // 得到ajaxdata = ['pear', 'banana', 'peach']
    var ajaxdata = ['pear', 'banana', 'peach'];
    var moreHtml = ajaxdata.map(item => {
        return `<li>${item}</li>`;
    })
    
    dom.innerHTML += moreHtml;
});

var data = ['apple', 'pen', 'chestnut'];
var html = data.map(item => {
    return `<li>${item}</li>`
}).join('')

dom.innerHTML = html;

遍历数据-> 渲染->插入到页面上->更新数据->遍历数据->渲染->插入到页面上

可能大家已经觉得讨厌了，似乎把一件类似的事情又做了一遍。。。
而且，如果再加上删除按钮，排序按钮，批量选择。。。已经不想做了
怎么能够这样呢，凡是重复的事情一定可以自动化。。。恩
改造一下,把中间的渲染dom的操作给抽成一个函数

function render(data, dom) {
    var html = data.map(item => {
        return `<li>${item}</li>`
    }).join('')

    dom.innerHTML = html
}

var dom = document.querySelector('#list');
var more = document.querySelector('#more');
var data = ['apple', 'pen', 'chestnut'];

render(data, dom);
more.addEventListener('click', function() {
    var ajaxData = ['pear', 'banana', 'peach'];
    var newData = data.concat(ajaxData);
    render(newData, html)
})

后面的工作中就变得简单了，我们不再关心，【数据】是怎么转换成【视图】，只需要关心，数据的变化，然后render

更新数据->render

  到这里已经初具MVC的思想 ，建立M(模型)->V(视图)的映射，然后通过C(控制器)改变更新M，达到最后视图上的更新

简单的MVC框架

  上一次任务完成后，我们发现如果下一次任务稍微发生一些变化，我们就要重新写一个render函数。如果每一个与数据有关的dom，我们都去专门建立一个MVC是令人讨厌的。
  可不可以有一种通用的建立映射的方式呢？