computed

这是一个计算属性，用于创建一个新的变量，其值是自定义的通过某些计算逻辑得到的结果，并在模板中引用，不需要加括号

示例：

<div id="example">

    <p>Original message: "{{ message }}"</p>

    <p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

var vm = new Vue({

    el: '#example',

    data: { message: 'Hello' },

    computed: {

        reversedMessage: function () {

            return this.message.split('').reverse().join('')

        }

    }

});

如上示例中，模板中的{{ reversedMessage }}是计算属性computed中定义的reversedMessage方法的返回值

计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值

watch

这是一个监听器，用于监听指定data的变化，执行自定义的操作

示例：

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

        }

    }

})

watch还有两个比较常用的参数：

（1）immediate：表示是否要在第一次渲染的时候执行这个函数

（2）deep：用于判断data中的对象元素的某个key的值是否发生变化，因为当元素中某个key的值变化时，Vue可能会认为这个对象没有变化，因为Vue判断对象是否发生变化的依据是对象的内存地址

computed 和watch的区别

1. computed 支持缓存，只有依赖数据发生改变，才会重新进行计算；watch 不支持缓存，数据变，直接会触发相应的操作

2. computed 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；watch 支持异步

两者如何使用

1. 如果一个数据依赖于其他数据的简易计算处理的，那么应该使用computed

2. 如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化