vue2.0中，watch和computed的用法区别是什么？

Question

搞不懂vue2.0中，watch和computed的用法区别是什么？有清楚的大神解释下，谢谢

Answer 1

1.首先从字面意思来看,computed是一个计算的属性,类似过滤器,对数据进行处理后return一个新的state,并且可以监听该返回值的变化,而watch是观察是一个动作;
2.computed用法,贴上代码:

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
  

3.watch用法,分为深度和普通监听

简单监听
    data(){
          return{
            'first':2
          }
        },
        watch:{
          first(){
            console.log(this.first)
          }
        },
        
深度监听:利用handler函数
data(){
  return{
    'first':{
      second:0
    }
  }
},
watch:{
  secondChange:{
    handler(oldVal,newVal){
      console.log(oldVal)
      console.log(newVal)
    },
    deep:true
  }
},

4.computed可以对数据处理得到一个新的state,而watch可以对state做异步改变;
5.这里有一篇文章全面分析这两个的用法和细节,保证可以解决你心中的所有困惑,请戳这里

Answer 2

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

https://cn.vuejs.org/v2/guide...

Answer 3

watch能监听vue数据，compute本来就是响应的，且自动更新。而watch就能监听它是否发生变化

Answer 4

比如我需要做状态变化的存储，用watch更合适，只要有变化并且符合条件缓存
用computed并不合适因为它更适合作为一个动态的返回
按照场景用就好了

Answer 5

watch是兼听数据变化、可以调用其他对应的方法或者做一些事情

举个最简单的例子、假如我们需要在当前页面跳转到当前页面、（路由一样、参数不一样）

那么vue是不会发生重载动作的、需要手动重载状态、也就需要在watch监听路由的变化、调用事先写好的reset或者init方法、