在 Vue 中，我们可以很方便的将数据使用插值表达式（ Mustache 语法）的方式渲染到页面元素中，但是插值表达式的设计初衷是用于简单运算，即我们不应该对差值做过多的操作。当我们需要对差值做进一步的处理时，这时，我们就应该使用到 Vue 中的计算属性来完成这一操作。同时，当差值数据变化时执行异步或开销较大的操作时，我们可以通过采用监听器的方式来达到我们的目的。
学习系列目录地址：https://www.cnblogs.com/danvic712/p/9549100.html
仓储地址：https://github.com/Lanesra712/VueTrial/blob/master/Chapter01-Rookie/watcher.html
二、干货合集 1、计算属性计算属性，一般是用来描述一个属性值依赖于另一个的属性值，当我们使用插值表达式将计算属性绑定到页面元素上时，计算属性会在依赖的属性值的变化时自动的更新 DOM 元素。例如在下面的代码中，我们在 computed 中，定义了一个 reversedMessage 属性，它可以根据我们的 data 中的 message 属性的变化自动的获取到反转后的 message 的属性值。
<div id="app"> 输入的值：<input type="text" v-model="message"><br /> 反转的值：{{reversedMessage}} </div> <script> var vm = new Vue({ el: '#app', data: { message: '' }, computed: { reversedMessage: function () { //这里的 this 指向 当前的 vm 实例 return this.message.split('').reverse().join('') } }, methods: {} }) </script>