2

在 VueJS 文档中，提到了以下行为。

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性的 getter 函数

<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 的绑定。最好的部分是我们以声明方式创建了这种依赖关系：计算的 getter 函数没有副作用，这使得测试和推理变得容易。

从最后一段第 2 句中，我了解到 VueJS 库将监视“消息”变量的值，然后在“消息”更改时重新计算“reversedMessage”。

谁能从概念上解释我如何在 JS 中实现这一点？是否遵循任何特定的软件设计模式？我很想知道如何让 JS 运行时来理解函数所依赖的变量。如果我的计算属性使用多个变量怎么办？

将此类行为的任何示例编程到其他系统/库/框架中？

4

0 回答 0