vue的计算属性computed和侦听器watch都是监听数据变化。

computed （计算）

其在vue单文件组件中就是对数据进行简单的一些逻辑计算，在项目开发中方便我们对原始数据处理。重要的是计算属性基于它的响应式依赖进行缓存的。只有当响应依赖关系变了即值发生变化了才会重新计算。否则，直接利用缓存，这样既避免多次调用函数又提升性能。

<div id="app">
	{{txt}}
</div>
<script>
	new Vue({
    el: "#app-01",
    data:{
        text: "123,456"  //结束不能带分号!!!
    },
    computed:{
    	// 所有计算属性都以函数形式写在computed选项内，最终返回计算的结果。
    	fullName:function(){
    		// 这里的this 指向的是当前的vue实例
			return this.text.split(',').reverse().join(",");
		}
    }
})
</script>

computed 有两个属性getter 和 setter，上面我们只用到了getter属性，默认是getter属性，如果需要主动去改变getter的值，可以通过setter来实现。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.text
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.text = names[0]
    }
  }
}

watch (观察 侦听)

watch 则多数监听数据改变，去执行异步操作和逻辑复杂的操作。同样watch也是在当值发生改变才会触发，没有缓存机制。

<template>
  <div>
    {{answer}}
    <input type="text" v-model="val" name id />
  </div>
</template>
<script>
export default {
  data() {
    return {
      val: "",
      answer:""
    };
  },
  watch: {
    // 如果 `val` 发生改变，这个函数就会运行
    // newQuestion 新值，oldQuestion 旧值
    val: function(newQuestion, oldQuestion) {
      this.answer = oldQuestion;
    }
  }
};
</script>

watch的类型可以是{ [key: string]: string | Function | Object | Array }
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。