たれぱんのびぼーろく

わたしの備忘録、生物学とプログラミングが多いかも

データバインディング

明示的・操作的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指示といったところ.