Question

在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函数没有副作用，这使得它易于测试和   理由。

从最后一段，第二句开始，我理解VueJS库将监视“message”变量的值，然后在“message”发生变化时重新计算“reversedMessage”。

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

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

在VueJS中监控计算属性的实现

0 个答案: