React Vue and implement two-way binding data comparison

one-way flow of data is react, change state status can only be updated through this.setState method, and then react with the new state to monitor, and then re-execute the render function, using its virtual DOM technology and efficient rendering.

(And users can change the input label when used together) vue natural two-way data binding, data can flow in both directions naturally.

react to achieve the two-way binding example

<!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 examples

<!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>

Sons components communicate Comparative

react:

Father to son, a sub-assembly by way of message properties set, data access subcomponents manner this.props.message

Child pass the Father, the components to sub-assemblies binding properties onChange = "this.doOnChange", sub-assemblies directly call this.props.onChange (data) doOnChange method parent component can trigger data and the data transfer in the past

view:

Father to son, by passing the props message attributes, attribute props need to explicitly stated in the message subassembly, then the subassembly may be as message properties as their use

doOnChange achieve sub parent mass bound to the subassembly by triggering event, such as @ onChange = "doOnChange", carrying the parameter data in execution of the function event (data subassembly) way to pass data parent element, this. $ emit ( 'onChange', data)

React Vue and implement two-way binding data comparison

Sons components communicate Comparative

Guess you like