11-1 面试为何会考察组件和状态设计
组件和状态设计
面试要求
1. 框架（Vue React）的使用（和高级特性）是必要条件 <br>2. 能独立负责项目？还是需要别人带着？——考察设计能力<br>3. 面试必考（二面/三面），场景题
考察重点
1. 数据驱动视图<br>2. 状态：数据结构设计（React-state Vue-data）<br>3. 视图：组件结构和拆分
回顾面试题
1. React设计todolist(组件结构，redux state数据结构)<br>2. Vue设计购物车（组件结构 ，vuex state数据结构）
11-2 状态设计的思路和要点<br>11-3 组件设计的思路和要点<br>11-4 React实现TodoList代码演示<br>11-5 组件设计和状态设计的总结<br>
React实现Todo List
1. state数据结构设计<br>2. 组件设计（拆分、组合）和组件通讯<br>3. 代码演示
state数据结构设计
设计原则
1. 用数据描述所有的内容<br>2. 数据要结构化，易于程序操作（遍历、查找）<br>3. 数据要可扩展，以便增加新的功能
组件设计
设计原则
1. 从功能上拆分层次<br>2. 尽量让组件原子化<br>3. 容器组件（只管理数据）& UI组件（只显示视图）
代码演示
容器组件App
定义状态List<br>以及List如何新增、如何删除、如何切换完成状态
List
负责把list列表渲染出来<br>列表的每一项交给ListItem渲染
总结
1. state数据结构设计<br>2. 组件设计 组件通讯<br>3. 结合redux
11-6 Vue实现购物车-你将如何设计<br>11-7 Vue实现购物车data如何设计<br>11-8 Vue实现购物车-组件设计和代码演<br>11-9 结合vuex实现购物车<br>
Vue实现购物车
1. data数据结构设计<br>2. 组件设计和组件通讯<br>3. 代码演示
data数据结构设计
1. 数据描述所有的内容<br>2. 数据要结构化，易于程序操作（遍历、查找）<br>3. 数据要可扩展，以便增加新的功能
组件设计
1. 从功能上拆分层次<br>2. 尽量让组件原子化<br>3. 容器组件（只管理数据）& UI组件（只显示视图）
代码演示
容器组件index.vue<br>
index.vue
管理所有的数据以及数据的变化，<br>怎么加入购物车，<br>怎么删除购物车的条目
产品列表组件<br>ProductionList<br>
ProductionItem.vue
ProductionItem.vue<br>
渲染商品条目<br>调用父类的方法，加入购物车
购物车列表组件<br>CartList<br>
index.vue
index.vue
渲染购物车列表
重新合并list数据（使用id将ProductionList和CartList中的商品关联起来）<br>计算购物车总金额
CartItem.vue
<br>调用父类方法，增加或者减少购物车中商品的数量
vuex实现购物车<br>
https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
内容太长，看git代码吧。。。<br>体会一下使用vuex和不适用vuex实现购物车时，组件设计、数据管理的差异<br><br>
