Vue、React、小程序中的数据相关问题

Hsia_Tao
178 阅读4分钟

创建数据

以创建一个 msg : 1 来举例说明，在Vue、React还有小程序中创建数据的方法

vue

语法：在配置对象中添加data函数，该函数会返回一个对象，该对象会被处理成响应式对象

export default {
    data(){
        return {
            masg:1
        }
    }
}

相关面试题

为什么data必须是一个函数？

  1. data一般存放当前组件独享数据
  2. 如果data是一个对象，该对象会被多个组件实例共同引用，导致一个组件修改状态，所有组件一起发生变化
  3. data函数采用的是工厂函数原理：工厂函数每次返回的对象，都是唯一的

react

  • 在class（类组件）中添加state属性即可，属性值为对象
state = {
    msg:1
}
  • 在函数组件中，使用 useState 模拟类组件中的state属性
const [msg,setMsg] = useState(1)

小程序

语法：在配置对象中，添加data属性，属性值为对象即可

Page({
    data:{
        msg:1
    }
})

相关面试题

为什么小程序的data不需要是一个函数

  • 因为小程序在创建data的时候，会使用到JSON对当前的data对象进行深拷贝，所以不需要像Vue一样写成函数形式

读取数据

还是以读取 msg 来举例，分别看看在Vue、React还有小程序中各有什么不同的地方

首先，需要明确的一点是读取数据分为两种情况：在模板中读取还有在js中读取


在模板中读取

Vue

使用插值语法 {{msg}} 即可在模板中展示出对应的属性值

<template>
    <div>
        {{ msg }}
    </div>
</template>

React

使用 {this.state.msg} 即可渲染出对象的属性值

  • 使用类组件时，需要在 render函数 中使用
render(){
    return (
        <div>
            {{ this.state.msg }}
        </div>
    )
}
  • 使用函数组件时，不需要 render函数
return (
    <div>
        {{ this.state.msg }}
    </div>
)

小程序

使用插值语法 {{msg}} 即可在模板中展示出对应的属性值

<view> {{msg}} </view>

在js中读取数据

Vue

使用 this.msg 即可读取到对应属性值

Vue执行流程为：

  1. 使用 this.msg 读取数据时，此时触发数据代码
  2. 实际是读取到 this.$data.msg，此时又会触发数据劫持
  3. 读取到 data 中的数据
console.log(this.msg)

React

  • 在类组件中，使用 this.state.msg 即可读取到对应属性值
console.log(this.state.msg)
  • 在函数组件中，读取使用 useState 创建出的数据时，可直接通过 msg 读取对应属性值
console.log(msg)

小程序

使用 this.data.msg 即可读取到对应属性值

console.log(this.data.msg)

更新数据

以修改 msg 的值为 345 来举例，分别看看在Vue、React还有小程序中各有什么不同的地方

Vue

语法：this.msg = 345

Vue修改流程：

  1. this.msg = 345，此时会触发数据代理
  2. 实际上是修改的this.$datra.msg = 345，此时又会触发数据劫持
  3. 经过数据劫持，将值修改为 345，同时调用 dep.notify 通知对应组件更新视图

相关面试题

  1. Vue更新数据是同步更新还是异步更新？
  • 同步更新
  1. Vue更新视图是同步更新还是异步更新？
  • 异步更新
  1. Vue响应式更新的最小单位是什么？
  • 组件

React

  • 在类组件中更新数据：this.setState({ msg:345 })

  • 在函数组件中更新数据：

    // 在函数组件中创建数据时，会定义一个参数还有一个修改参数的方法
const [msg,setMsg] = useState(1)
// 在函数中更新数据时就需要使用到修改参数的方法
setMsg(345)

相关面试题

  1. React中更新数据是同步更新还是异步更新？
  • 即可同步，也可异步
  • 同步更新
    1. 原生事件
    2. 定时器
  • 异步更新
    1. 声明周期
    2. 合成事件
      • 什么是合成事件？
        • 只要是驼峰命名法，就一定是合成事件
        • 例如：onClick="xxxx"，即使合成事件

小程序

语法：this.setData({ msg:345 })

相关面试题

  1. 小程序更新数据是同步更新还是异步更新？
  • 更新数据是同步更新
  • 只要每次读取 this.data中的数据，一定能得到当前最新数据
  1. 小程序更新视图是同步更新还是异步更新？
  • 更新页面是异步的
  • 类似于函数防抖，将多次更新结果统一留到最后一次性更新（性能优化）

数据流向

首先表明一点，Vue、React还有小程序都是单向数据流。

其中，Vue相对来说比较特别，也可以称之为伪双向

  • 因为Vue可以使用 v-model 进行双向数据绑定
    • 首先是将data中的数据作为默认值，显示在 input框内部
    • 当用户修改 input框的内容时，同步修改data中对应属性的结果

小程序也有双向绑定机制，使用时只需要在前面添加 model: 前缀

<input model:value="{{msg}}" />
avatar
文章
阅读
粉丝