Vue 计算属性 vs 侦听属性

<div id="demo">{{ uname }}</div>

//侦听属性

var vm = new Vue({
  el: '#demo',
  data: {
     //名
    firstName: '大胆',

    //姓
    lastName: '王',

    //全名
    fullName: '王大胆'
  },
  watch: { // 侦听属性

    firstName: function (val) { //val为firstName（名）改变后的新值  

      this.fullName = val + this.lastName   //执行命令 进行拼接（得到姓名即全名）
    },

    lastName: function (val) {    //val为lastName（姓）改变后的新值 

      this.fullName = this.firstName + ' ' + val   //执行命令 进行拼接（得到姓名即全名）
    }
  }
})

代码重复，且是命令式  代码冗余


//计算属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: '大胆',//名

    lastName: '王',//姓
  },

  computed: {  //计算属性    计算属性还有一个缓存机制

  //响应式得到结果    
    fullName: function () {
      return this.firstName + this.lastName  
     // 计算属性是基于它们的响应式依赖进行缓存的。只在 
     // 相关响应式依赖发生改变时它们才会重新求值  直接return返回结果
    } 
  }
})