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 成员建立的。以下是针对您的用例修改的 docs 示例：

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;
    }
  }
});