javascript - VueJS での計算されたプロパティの監視の実装

Question

VueJS のドキュメントでは、次の動作について言及されています。

ここでは、計算されたプロパティ reversedMessage を宣言しています。提供された関数は、プロパティのゲッター関数として使用されます

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage:

console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

コンソールを開いて、例の vm を自分で試すことができます。vm.reversedMessage の値は、常に vm.message の値に依存します。

通常のプロパティと同様に、テンプレート内の計算されたプロパティにデータ バインドできます。Vue は、vm.reversedMessage が vm.message に依存していることを認識しているため、vm.message が変更されると、vm.reversedMessage に依存するすべてのバインディングを更新します。そして最良の部分は、この依存関係を宣言的に作成したことです。計算されたゲッター関数には副作用がないため、テストと推論が容易になります。

最後の段落の 2 番目の文から、VueJS ライブラリが「メッセージ」変数の値を監視し、「メッセージ」が変更されるたびに「reversedMessage」を再計算することを理解しています。

JSでこれをどのように達成できるか、概念的に説明してもらえますか? 従われている特定のソフトウェア設計パターンはありますか? 関数が依存する変数を JS ランタイムがどのように理解するのか知りたいです。計算されたプロパティが複数の変数を使用している場合はどうなりますか?

他のシステム/ライブラリ/フレームワークにプログラムされたそのような動作の例はありますか??