前端没有数据库的概念，不能永久保存， 那么前端数据应该怎么管理呢。

1、 原始方法

直接在view中定义要使用的数据， 然后传值显示。

let data = ['test','test'];

//借助js框架将data可以传递到html中

//借助js框架将data可以传递到html中

2、 前端动态管理数据

在view中初始化数据， 也相当于是在view中定义要使用的数据

Function (name) {

return this.name = name;

};

function init() {

let initData1 = new Function('test1');

let initData2 = new Function('test2');

return initData = [initData1, initData2];

};

init();

//借助js框架将data可以传递到html中

//借助js框架将data可以传递到html中

通过函数来生成数据的好处， 方便数据的处理。

比如通过点击事件想在添加一个数据， 则可以通过js调用函数， 生成一个新数据，

那么怎样将生成的新数据传递给html呢？？？

以前的方法：

前端要想更新页面数据， 必须重新请求后台， 获取新数据，然后刷新页面。

js直接操作dom，修改dom值。

可是如果页面需要更新的地方太多， 直接通过js操作dom修改dom值， 会惨不忍睹。

对于上面这样的情况，则每个dom都要处理的话， 页面负担重， 代码上也会很麻烦。

现在的方法：

因为这些dom的数据都是有关联性的， 更新了initDataType这个数据， 可以指定更新某个具体的dom以及这个dom的子dom。

(riotjs的例子)[https://github.com/zhangchch/...]

这个例子中，就是通过js初始化数据，然后通过js事件，更新数据，

更新数据后， 指定更新某个组件(只是更新这个组件，不会影响其他组件，也不会更新整个页面)，同时也会更新这个组件的子组件。

那么这个过程中数据是怎么管理的呢？

添加course或者添加student或者添加student

course.tag 这个组件的数据存储在courseList,studentsList这两个数组中。

先初始化两个数组的数据。

当通过某个事件改变这两个数组的数据的时候， 比如courseList添加想添加一个元素。

某个地方点击添加courseList， 携带添加的值， 触发添加函数添加一个courseList元素，

然后将这个添加的courseList元素放入courseList数组中， 最后更新这个组件。

也就是说通过操作courseList,studentsList这两个数组，来管理数据的。(更新相应组件)

student取消订阅某个course或者添加订阅某个course

student-item组件中，通过取消订阅某个course事件，

哪个学生取消哪个订阅，

直接在当前学生组件中， 取消订阅某个course， 同时触发对应的course组件， 消除这个student。

这个做法是在具体的两个对应的组件中修改数据，然后各自更新自己的组件。

对总的courseList,studentsList没有任何操作，也就是说courseList,studentsList没有发生变化。

这个做法是点对点的操作。

redux的思想：student取消订阅某个course， 去更新courseList,studentsList， 然后更新course.tag 这个组件，自动去刷新子组件。

某个course发布消息通知所有订阅了这个course的学生

这个也是点到点的数据操作， course-item组件中发布某个消息， 携带学生，消息等参数， 传递给student-item， 然后各自更新自己的组件。