vue中监听属性(watch)和计算属性(computed),从对比两个变量的大小,进行某些操作(可以解决后面的日期必须大于前面的日期等等类似操作)

以前对于watch和computed的应用都是知其然而不知其所以然,只是有个模糊的概念.现在有个需求就是两个数字类型的input框,对比绑定值得大小,来控制div的显示与隐藏;
我在想是用watch还是computed,本身这个需求计算属性和监听属性都具有.

先上解决办法,再说两者的区别

要求maxValue要大于minValue,以下是提取的代码片段

//先在data定义两个变量:

data(){
  return{
     minValue:1,
     maxValue:2,
     showTxt :false
  }
},
computed: {
    result() {
      let result = this..maxValue-this.minValue;
      return result;
    }
  },
  watch:{
    result(newV,oldV){
      if(newV>0){
        this.showTxt = false;
      }else{
        this.showTxt = true;
      }
    }
  },

我的解决办法是通过计算属性,把两个值绑在一起,再通过watch来监听他们的大小变化,来控制div的显示隐藏

那么watch和computed有什么区别吗

computed
设计computed的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,例如:

  {{ message.split('').reverse().join('') }}

应用computed:

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

watch
vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

{{ fullName }}

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适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）
computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。
Computed 的响应是 deep 的响应，即在计算过程中用到的对象的属性发生变化，是可以被监听到的。
Watch 的响应默认为非 deep 的响应，即观测的是某个对象的字面量。当然，我们可以为 Watch 设置 deep 响应类型或是监听其属性