computed也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护：
<div id="example"> {{ message.split(‘‘).reverse().join(‘‘) + number }} </div>
以上代码可以改为：
<template> <div> <p>{{ reversedMessage }}</p> </div> </template> <script> export default { name: ‘test1‘, data () { return { message: ‘hello world‘, number: 1 } }, computed: { // 字符串反转 reversedMessage () { return this.message.split(‘‘).reverse().join(‘‘) + this.number } } } </script>
上面的代码片段中，在reversedMessage中，它依赖了message和number这两个属性，一旦其中一个变化了，reversedMessage会立刻重新计算输出新值。
在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值：
computed: { // 计算属性的getter reversedMessage: function () { console.log(‘调用了‘); return this.message.split(‘‘).reverse().join(‘‘); } }
当我们连续调用计算属性：
console.log(vm.reversedMessage)
console.log(vm.reversedMessage)
console.log(vm.reversedMessage)
watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。
<template>
<div>
<p>{{ this.number }}</p>
</div>
</template>
<script>
export default {
name: ‘test1‘,
data () {
return {
number: 1
}
},
created () {
setTimeout(() => {
this.number = 100
}, 2000)
},
watch: {
number (newVal, oldVal) {
console.log(‘number has changed: ‘, newVal)
}
}
}
</script>
上面的代码中，我们在watch中监听了number属性，并且在实例创建后2s执行对number属性的值的更改。我们可以在控制台中看到2s后打印了如下图：
computed可以通过几个数据的变化来影响一个数据，而watch，则是可以通过一个数据的变化去影响多个数据。
以下代码是针对fullname这个属性的监听：
<div id="demo">{{ fullName }}</div>
使用watch：
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 } } })
使用computed：
var vm = new Vue({ el: ‘#demo‘, data: { firstName: ‘Foo‘, lastName: ‘Bar‘ }, computed: { fullName: function () { return this.firstName + ‘ ‘ + this.lastName } } })
1、computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适；
2、一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；
3、methods 方法表示一个具体的操作，主要书写业务逻辑；
原文：
https://blog.csdn.net/u011423258/article/details/88641870
原文：https://www.cnblogs.com/xjy20170907/p/12566338.html