函数实例

时间:2017-08-22 05:41:45

标签: vue.js vuejs2

在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中的组件数据

1 个答案:

答案 0 :(得分: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;

我应该提一下,我并不确定你的意思是什么&#34;它们不是Vue中的组件数据&#34;因为你首先想让某些东西被反应的全部原因是因为你希望它在一个组件的模板中呈现,并且当一个属性发生变化时组件会自动重新渲染,所以你可以&#39 ; t真的让Vue外面有一些反应。

我理解你的问题是按照&#34;如何对Vue做出反应而不需要在Vue组件的数据或计算属性中直接指定它?&#34;。请注意,person属性必须在组件的data 中预先声明为该属性(以及分配给它的任何数据)才能被激活。只要你这样做,你就可以设计你想要的模型对象。