[JavaScript知识库]react 与 vue 的双向数据绑定的对比实现

react 与 vue 的双向数据绑定的实现区别

react 实现双向数据绑定

import React, {Component, Fragment} from "react";

class TodoList extends Component {
  constructor(props) {
    super(props);
    // react 定义组件的数据就需要定义在 state 里面
    this.state = {
      inputValue: '哈哈哈',
      list: []
    }
  }

  render() {
    return (
        <Fragment>
          <div>
            {/*注意：双向绑定：在JSX里面，使用 state 里面的数据的时候（或者是要使用js表达式的时候），是需要 {} 来包起来，和 Vue 不太一样，vue 是 直接 : */}
            {/*如果只是 value={this.state.inputValue} 这样写的话，用户不能进行输入，改变输入框的值，所以我们要加一个事件监听*/}
            <input type="text"
                   value={this.state.inputValue}
                   // 注意：onChange 的 change 要首字母大写
                   onChange={this.handleInputValue.bind(this)}/>

            <button>提交</button>
          </div>

          <ul>
            <li>学英语</li>
            <li>学 react</li>
          </ul>

        </Fragment>
    )
  }


  handleInputValue(e) {
    // console.log(e.target.value)
    // console.log(this); // undefined

    // this.state.inputValue = e.target.value;// 这种改变state里面数据的方式是错误的，改为
    this.setState({
      inputValue: e.target.value
    })

  }

}

export default TodoList

Vue 实现双向数据绑定

输入的文本: <input type="text" v-model="message"> {{message}}

总结

react 默认是实现单向绑定，要实现双向绑定，自己要去监听事件，并做处理，Vue使用 v-model 就直接进行双向绑定

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖