Vue中的计算属性和侦听属性

Vue的侦听属性可以使用 watch ,它可以监听多个变量,一旦它们发生了变化,就执行function函数,var代表的是这个发生变化了的参数。

var vm 
= new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

但是这有一个不方便的地方,它是命令式且重复的。实际上我们想根据firstName和lastName的值来得到相应的fullName,所以直接计算fullName的值，使用computed属性：

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

我发现在data中可以不用先定义fullName，这与watch属性又不一样。