函数实例的计算属性

Question

在 knockout.js 中，我能够做到以下几点：

function Person() {
    this.firstName = ko.observable('Foo')
    this.lastName = ko.observable('Bar')
    this.fullName = ko.pureComputed(() => {
        return this.firstName() + this.lastName()
    })
}

var p = new Person()
console.log(p.fullName()) // FooBar

有没有办法在 Vue 中不是组件数据的对象上添加响应式计算属性？

Answer 1

在 Vue 中，您不需要像 Knockout 所要求的那样显式声明响应式属性和方法。一切都只是一个普通的对象。

实际上使对象在 Vue 中具有响应性的是，当您通过在该组件的 data 对象中声明的属性将其分配给该组件时。

所以你在 Vue 中的例子就是：

function Person() {
  this.firstName = 'Foo';
  this.lastName = 'Bar';
  this.fullName = function () {
    return this.firstName + this.lastName;
  };
}

var p = new Person();
console.log(p.fullName());  // FooBar

如果你在组件中使用它，那么它将是响应式的，就像这样：

const comp = new Vue({
  template: '<div>{{ person.fullName() }}</div>',
  data: {
    person: null,
  },
});

// Vue detects that p is being assigned to the reactive property
// 'person' and makes p reactive.
comp.person = p;

我应该提一下，我不太确定您所说的“它们不是 Vue 中的组件数据”是什么意思，因为您首先希望某些东西具有反应性的全部原因是因为您希望它被渲染在组件的模板中，并让组件在属性更改时自动重新渲染，因此您无法真正在 Vue 外部做出反应。

我将您的问题理解为“如何使某些东西对 Vue 产生反应，而无需直接在 Vue 组件的数据或计算属性中指定它？”。请记住，person 属性必须在组件的data 中预先声明，以使该属性（以及分配给它的任何数据）具有反应性。只要您这样做，您就可以随心所欲地设计模型对象。