javascript - VueJs 如何创建具有可观察属性的对象

Question

如何在 VueJS 中创建等效的 knockoutjs ViewModel？例如：

var Person = function() { 
    var self = this;
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');
    this.fullName = ko.computed(
    function() { 
        return self.firstName() + ' ' self.lastName();
    });

什么是 VueJs 中的等价物？如何在没有模板属性且不将其创建为组件的情况下创建对象或视图模型？如果可以，我是否只创建普通的 javascript 对象（函数/json 对象），如何在这些普通的 javascript 对象中创建计算/可观察的属性？

Answer 1

是的，在 Vue 中，模型只是一个 pojo。计算属性是使用其computed成员建立的。这是针对您的用例修改的文档中的一个示例：

var vm = new Vue({
  el: '#aPerson',
  data: {
    firstName: '',
    lastName: ''
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

接受对象的可重用组件person如下所示：

Vue.component('person', {
  props: ['person'],
  computed: {
    fullName () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});