明示的・操作的UI更新
// 元データ: data = "black"; // データ更新 const newData = "red"; // 対象UI要素の取得 & 属性更新 const target = Document.querySelector("#target"); target.setAttribute("style", `color: ${newData}`); // ブラウザによるUI更新: 文字が黒から赤へ
データバインディング
// 元データ: "black"; // データ更新 Binding.data = "red"; // バインディング機構による暗示的UI更新 // 上記で自動的に文字が黒から赤へ
内部的にはdataの操作がsetterによって検出・横取りされ、setter内で適切なバインド対象の取得・更新が行われている(対象UIの取得と更新は "無い" のではなく、data binding機構により暗示的におこなわれている。)
data bindingをサポートするライブラリでは、最初にdataとbind対象の組み合わせを設定するだけで、setter設定等の必要な操作を担ってくれる。
Vue.js
Vue.jsでは reactivity system、リアクティブ と呼んでいるものがデータバインディングを少なくとも実行している.
まさしくsetterによるデータ変更検出とrerender指示といったところ.