vue、react与小程序的数据比较

1. C(create 添加)
   1. Vue
      1. 配置对象中必须具有data函数,该函数会返回一个全新的data对象
      2. 面试题:为什么data不能写为一个对象,必须是函数
         1. 如果data是一个对象,那么之后通过该组件代码生成的所有组件实例对象,会共享这一个data对象,导致一个组件修改状态,所有组件都发生变化
         2. 而data函数的效果就是一个工厂函数,每次调用他都会生成一个全新的对象(地址值永不重复)
   2. React
      1. 直接在class组件的函数体,写上state={}即可
   3. 小程序
      1. 配置对象中书写data属性,属性值为对象
      2. 注意:小程序可以不用像Vue那样必须填写函数的原因,是因为小程序会对data数据进行JSON深拷贝
2. R(read 读取)
   1. 在页面中的读取
      1. Vue
         1. 在template标签中,使用插值语法可以展示data中的数据
         2. 如果使用在指令上,不需要添加插值语法,因为Vue会把内部的字符串当作状态解析
      2. React
         1. 在render函数的返回值中,可以通过添加{}实现对状态数据的读取
      3. 小程序
         1. 在wxml中,使用插值语法可以展示data中的数据
         2. 注意:只要想在wxml中使用data中的数据,一定要加插值语法
   2. 在js中进行读取
      1. Vue
         1. 读取:this.msg
         2. 流程:this.msg=>经过数据代理=>this.$data.msg=>经过数据劫持=>返回msg属性的value值
      2. React
         1. 读取:this.state.msg
         2. 注意:React中没有数据代理和数据劫持,所以只能直接读取state身上的msg
      3. 小程序
         1. 读取:this.data.msg
         2. 注意:小程序中没有数据代理而且没有数据劫持,所以只能直接读取data身上的msg
3. U(update 更新)
   1. Vue
      1. 修改:this.msg=123
      2. 流程:this.msg=123=>经过数据代理=>this.$data.msg=123=>经过数据劫持=>dep.notify(通知视图进行更新)
      3. 面试题:Vue修改数据是否是同步的?Vue更新页面是否是同步的?
         1. Vue会同步修改data中的数据
         2. Vue更新视图是异步的(面试举例:后台管理系统编辑模式切换)
   2. React(持久化状态框架)
      1. 修改:this.setState({msg:123})
      2. 注意:React不通过setState方法无法更新视图
      3. 面试题:setState修改数据是否是同步的?更新页面是否是同步的?
         1. setState修改数据既不是同步,也不是异步
            1. 同步修改
               1. 原生事件
               2. 定时器
            2. 异步修改
               1. 合成事件
                  1. 如何分辨一个事件是不是合成事件?只要事件名称有驼峰命名法,就是合成事件
                  2. 总结:原生事件是亲儿子,合成事件是捡来的
                     1. 因为合成事件是利用了事件委托的原理,将事件绑定在#root元素身上
               2. 生命周期
   3. 小程序
      1. 修改:this.setData({msg:123})
      2. 小程序的data属性可以后续通过setData新增
      3. 面试题:小程序修改数据是否是同步的?小程序更新页面是否是同步的?
         1. 小程序修改数据是同步的
         2. 小程序更新页面是异步的
         3. 总结:以后小程序只要读取this.data.msg,一定可以得到当前最新数据
   4. 总结:无论是Vue,React还是小程序,所有框架更新视图的操作都是异步执行
4. 数据流向
   1. Vue
      1. 单向数据流
      2. 双向数据绑定v-model
         1. v-model原理
            1. 将v-model中的状态数据的值作为input框的默认值进行展示
               1. :value=“msg”
            2. 监视input框的内容变化,当input框内容发生变化就修改data中的对应数据
   2. React
      1. 单向数据流
   3. 小程序
      1. 单向数据流