在刚开始实习的时候，突然发现我对computed, methods, watch之间的区别还不是非常透彻，只知道它们大概的含义和用途。下面是我整理的这三个属性的区别和联系。
computed:
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">{{ message.split('').reverse().join('') }}</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于一些复杂逻辑，你应当使用计算属性。优化后：
<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: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}})
结果：
Original message: "Hello"
Computed reversed message: "olleH"
methods:
methods是Vue提供的逻辑运算的单元，和其它语言中的方法功能一致。对于上述的功能，也可以用methods来实现：
<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中methods: {reversedMessage: function () {return this.message.split('').reverse().join('')}}
computed和methods的区别：
1.监听相关值的变化： methods方法执行一次就结束了，如果后面message的值再次变化了，reversedMessage不会重新被渲染；而computed就不同了，当关联属性message发生变化后，computed会重新执行一遍，把根据变化后的属性值计算出来的新值重新渲染到页面上。
2.计算缓存：computed翻译过来是计算属性，所以它可以被当成一个属性来使用（而上面computed被当成方法来使用，说明computed就像光一样，具有“波粒二象性”。computed是不是很厉害！），属性可以使用的地方它都可以使用（当然方法可以使用的地方它也可以）：也就是说，计算属性不仅可以在模板中使用，在js代码中也可以使用。缓存体现在：计算属性只有当所关联的属性变化时，它才会重新计算一遍，而不变的时候，它一直取上次计算的值，这是与methods最大的区别之处。
当然，methods也有自己的优势，比如methods在被调用时可以传入参数，且methods可以进行更加复杂的逻辑运算。有些场景，用computed并不适合，如：
computed: {now: function () {return Date.now()}}
这种情况下，Date无法做到响应式计算更新
watch:
监听器，监控相应的属性，当属性发生变化，调用对应的回调函数
var vm = new Vue({data: {a: 1,b: 2,c: 3,d: 4,e: {f: {g: 5}}},watch: {a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深c: {handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用d: {handler: 'someMethod',immediate: true},// 你可以传入回调数组，它们会被逐一调用e: ['handle1',function handle2 (val, oldVal) { /* ... */ },{handler: function handle3 (val, oldVal) { /* ... */ },/* ... */}],// watch vm.e.f's value: {g: 5}'e.f': function (val, oldVal) { /* ... */ }}})vm.a = 2 // => new: 2, old: 1
注意：不应该使用箭头函数来定义 watcher 函数 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。
computed和watch的区别：
首页明白一点：watch是监控影响因素（影响要使用属性的因素），而computed是计算属性，对应的函数里包含影响因素。
当然，当computed和watch都能实现时，优先选用computed，因为简单。但有些情况，没法使用computed来实现，比如当遇到复杂计算逻辑或者异步调用时，如：
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p></div><script>var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {question : function (newValue, oldValue){if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thissetTimeout(function () {vm.answer = "Vue2"},1000)}}})
上面用watch可以实现，但是如果用computed就不能实现了，如下：
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p></div><script>var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',},computed: {answer: function () {if (this.question.indexOf('?') === -1) {return 'Questions usually contain a question mark. ;-)'}else{setTimeout(function () {return "Vue2"},1000)}},}})
发现：answer并没有变为Vue2, 也就是说它不会等到异步调用结束才返回值，这是因为计算属性本质还是属性，如果不能立马返回，那么在这空档期该显示什么呢？所以计算属性如果不能立马返回，那么就返回空值。
ps：创作不易，如有帮助，多多点赞，谢谢支持
如果觉得《详解Vue: computed methods watch的区别和联系》对你有帮助，请点赞、收藏，并留下你的观点哦！
