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 对象（function/json 对象）如果是这样我如何在那些普通 javascript 对象中创建 computed/observable 属性？

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

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

VueJs How to create object with observable properties

javascript

knockout.js

vue.js

vue-component