数据驱动通用思想：

把界面要变化的部分，抽取到动态数据中，通过数据变化，自动更新视图

1. 书写静态组件

react: 新建.js文件， 书写class，render

vue： 新建.vue文件， 书写template

2. 把要变化的值，抽取到状态中（动态数据）

react: state = { a: xxx, b : xxx }

vue: data(){

return {

a: xxx,

b: xxx

}

}

3. 在适当时机，改变状态，自动通知视图更新

react: this.setState({状态名: 新的值})  (基于MVC，需要让setState通知更新)

vue: this.状态名 = 新的值    (基于MVVM会触发set通知watch更新)

react与vue的key值的作用

当key相同时，且元素类型相同，会进行最小粒度更新，而key不同的时候，新旧虚拟dom对比，react||vue会认为是不同的两个元素，会直接进行替换。

v-for 的原生js实现  

使用数组的map方法，将每一个结构return出去

例：typeList.map(item=>{

          return <Button getBtn={getBtn} type={item.type} key={item.id}>{item.name}</Button>

       })

v-modal 的原生js实现

v-modal是表单控件的双向绑定指令，将表单控件的value值交给状态管理，在表单控件上绑定change事件，当表单控件的value值改变，立即触发change方法，在change方法中通过拿到事件对象改变value的状态并通知视图更新，便实现了双向绑定的原理！

vue data为什么是函数

因为函数的作用域是独立的，防止data中的数据被同一种组件的不同实例所影响。