データのバインド

🔔 Goal

データバインディング

について

データのバインド

データバインディングは、2つのデータまたは情報ソースをマッチングする技術です.これは、画面上のデータをブラウザメモリのデータと一致させる技術です.
私はあなたの意味を知っています...本当に話せるだけ...

🌳 簡単に理解してみましょう。

🍃 双方向データのバインド

図に示すように、データが変化するたびに、低観察者はデータの変化を検出し、テンプレートと組み合わせて画面を更新する.(HTML <-> JS)
より詳細には、データの変更はフレームワーク内で감시を行い、その後、データの変更時にDOMオブジェクトをレンダリングしたり、ページ内でモデルの変更を検出してJSエフェクタでデータを変更したりする.したがって、入力された値や変更された値に応じて、コンテンツはすぐに変更されるため、単独で処理する必要はありません.Angular.jsまたはVue.jsは、通常、上記の方法を使用する.
vueで記述された双方向データバインドサンプルコード

...
<div id = "app">
	<form>
    	<input type="text", v-model="text>
        <p>{{ text }}</p>
        <button type="submit">제출</button>
    </form>
</div>

<script>
	new Vue({
    	el: '#app',
        data: {
        	text: ''
        },
        methods: {
        	//
        },
    })
</script>
...

🍃 一方向データのバインド

図に示すように、データが変化するたびに、スクリプトとテンプレートをイベントハンドルで直接結合して画面を更新します.(HTML <- JS)React.jsは、通常、上記の方法を採用する.
reactによって作成された一方向データバインドサンプルコード

  state = {
    name: ''
  }
  handleChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  render() {
    return (
      <form>
        <input
          placeholder="이름"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <div>{this.state.name}</div>
      </form>
    );
  }

🌳 考えを整理する.

開発の観点から、双方向性が悪いという考えが生まれるかもしれません.そうだ.双方向データバインドには多くのメリットがあります.しかし、多数のビューを構成する場合、双方向データバインディングは、それに関連するモデルを多数検出し、パフォーマンスに直接影響を及ぼす必要があります.
多くの最適化ソリューションがこの問題を解決できますが、不適切な使用では、パフォーマンスの問題が発生します.
つまり、使えるなら必要なところに使うということです.

🌳 Reference

朴明浩の中殿。