React和Vue实现数据双向绑定比较

react数据是单向流动的，state状态更改只能通过this.setState方法来更新，然后react监听到state跟新，然后重新执行render函数，使用其虚拟DOM技术高效的进行渲染。

vue天生的数据双向绑定的（和用户可以输入更改的标签一起使用的时候），数据天然可以双向流动。

react要实现双向绑定的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class HelloMessage extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'Hello Runoob!'};
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  render() {
    return <div>
            <input type="text" value={this.state.value} onChange={this.handleChange} />
            <h4>{this.state.value}</h4>
           </div>;
  }
}
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);
</script>

</body>
</html>

vue的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="message" >
  <h4>{{ message }}</h4>    
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Runoob!'
  }
})
</script>
</body>
</html>

父子组件通信比较

react:

父传子，通过给子组件设置属性message的方式，子组件中通过this.props.message方式访问数据

子传父，父组件给子组件绑定了属性onChange="this.doOnChange",子组件中直接调用this.props.onChange(data)就可以触发父组件的doOnChange方法并把数据data传递过去

vue:

父传子，通过传递props属性message，props属性需要在子组件中显式的申明message，然后子组件可以像message是自己的属性一样使用

子传父，通过触发绑定到子组件的事件，如@onChange="doOnChange"，在事件的执行函数中携带参数data（子组件的数据）方式把data传递给父组件的doOnChange实现，this. $emit('onChange', data)

React和Vue实现数据双向绑定比较

父子组件通信比较

猜你喜欢