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