VUE-计算属性computed和侦听属性watch

 1、DOM结构：

<div id="app">
    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">
</div>

2、计算属性fullname

computed: {  
        'fullname': function () {
          return this.firstname + '-'  + this.lastname
        }
}

• 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】；
• 计算属性的本质是 一个带有返回值 return 的方法；
• 我们在使用计算属性的时候，是把它们的名称，直接当作属性来用，并不会把计算属性，当作方法去调用；
• 只要计算属性的 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个 计算属性的值；
•  计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果计算属性方法中的任何数据，都没有发生过变化，则不会重新对计算属性求值；

3、侦听属性

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

• 侦听属性需要先在 data 或 props 中进行定义，如firstName 、lastName
• 当firstName 、lastName发生变化时，调用相应的方法
• 当需要在数据变化时执行异步（如：从后端获取数据）或开销较大的操作时，这个方式是最有用的
• 不需要有返回结果