前端数据管理
前端没有数据库的概念，不能永久保存， 那么前端数据应该怎么管理呢。
1、 原始方法
直接在view中定义要使用的数据， 然后传值显示。
let data = ['test','test'];
<div>{ data[0] }</div> //借助js框架将data可以传递到html中
<div>{ data[1] }</div> //借助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();
<div>{ initData[0]</div> //借助js框架将data可以传递到html中
<div>{ initData[1]</div> //借助js框架将data可以传递到html中通过函数来生成数据的好处， 方便数据的处理。
比如通过点击事件想在添加一个数据， 则可以通过js调用函数， 生成一个新数据，
那么怎样将生成的新数据传递给html呢？？？
以前的方法：
- 前端要想更新页面数据， 必须重新请求后台， 获取新数据，然后刷新页面。
- js直接操作dom，修改dom值。
可是如果页面需要更新的地方太多， 直接通过js操作dom修改dom值， 会惨不忍睹。
<div>
{ initDataType }
<div>{ initDataType.type }</div>
<div>{ initDataType.name }</div>
<div>{ initDataType.id }</div>
</div>对于上面这样的情况，则每个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， 然后各自更新自己的组件。