Vue中的methods、watch、computed

看到这个标题就知道这篇文章接下来要讲的内容，咱们在使用vue的时候methods、watch、computed这三个特性必定常用，由于它们是很是的有用，可是没有完全的理解它们的区别和各自的使用场景，也很难用好它们，但愿接下来的介绍为你答疑解惑。

computed

咱们先来看计算属性:computed，光看名字也知道是用来干什么的，计算属性固然是用来计算的，可是是怎么计算的呢？计算属性有两个显著的特色：

• 计算属性计算时所依赖的属性必定是响应式依赖，不然计算属性不会执行
• 计算属性是基于依赖进行缓存的，就是说在依赖没有更新的状况，调用计算属性并不会从新计算，能够减小开销

咱们来看一个相关的例子：

<div id="app">
  <div>{{ arr.join('') }}</div>
  <div>{{ arr1 }}</div>
  <div>{{ getDate }}</div>
  <div>{{ getDate1 }}</div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    date: '',
    arr: ['a', 'b', 'c']
  },
  computed: {
    getDate () {
      return Date.now()
    },
    getDate1 () {
      return this.date
    },
    arr1 () {
      return this.arr.join('')
    }
  },
  created () {
    setInterval(() => {
      this.date = Date.now()
    }, 1000)
  }
})

看上面的例子，咱们在写vue的时候，常常会碰到要对data的值进行操做的状况，为了方便，老是会有人直接在模版中对data的值进行计算操做，就像我上面例子中写的在模版中将数组转化为字符串，这样写有问题吗？语法没有问题，可是在模版中使用太多的计算，维护会是个问题，换我的来看代码的时候会很痛苦，这种写法就好像在html中插入js的逻辑运算，可维护性极差。另一个展现的就是computed的响应式依赖的问题，当咱们调用getDate的时候返回的Date.now()返回的是一个非响应式的依赖所以getDate返回的值不会变。

应用场景

看了computed的特色以后，那么它的应用场景是什么呢？我的见解，但不限于如下场景：

• 复杂的渲染数据计算，用computed计算属性能够减小必定计算开销，增长可维护性
• 从Vuex Store中收集相关信息，对Vuex中的数据作计算的时候的要特别注意computed的缓存属性，在对Vuex中的对象值进行属性修改的时候，并不会触发computed的中值的变化，这时须要Object.assign({},obj)对依赖对象进行跟新返回一个新对象触发依赖跟新
• 表单校验，这个应用场景应该是比较常见的，利用正则表达式对每一个表单项的实时监控，判断表单是否能够提交

methods

methods你们应该都会用，是vue中的方法属性，全部的方法调用都会写到这里面，你们用的最多也是在累似@click这样事件调用中使用，可是不少人都忽视methods的另外一个用法，就是在模版中使用methods，下面来看一个例子：

<div id="app">
  <div v-for="(item, idx) in arr">
    {{ matching(item) }}
  </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    arr: ['a', 'b', 'c'],
    obj: {a: 'hello', b: 'world'}
  },
  methods: {
    matching (key) {
      if (this.obj[key]) {
        return this.obj[key]
      } else {
        return 'not found'
      }
    }
  }
})

上面的例子就是methods在模版中经常使用的一个场景，当模版中的某个循环的值须要进行必定逻辑运算时，这时候你就可使用methods方法，将对应的值传入，而后计算出结果返回到模版显示，这个时候用computed是无法实现的，computed中你没法传参，methods和computed除了这个不同以外，还有就是在methods中的计算是不会作缓存的，也就是你调用多少次就会计算多少次，相对computed的开销要大一些。

watch

侦听属性是专门用来观察和响应vue实例上的数据变更，能使用watch属性的场景基本上均可以使用computed属性，并且computed属性开销小，性能高，所以能使用computed就尽可能使用computed属性，那么watch属性是否是就没用武之地了呢？当执行异步操做的时候你可能就必须用watch而不是computed了，下面看一个例子：

<div id="app">
  <div>{{ obj1.a  }}</div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    obj: {a: 'hello'},
    obj1: {a: 'hello'},
    test: 'aaa'
  },
  computed: {
    getObj () {
      setTimeout(() => {
        this.obj.a = this.test + 'word'
        return this.obj
      }, 1000)
    }
  },
  watch: {
    test () {
      setTimeout(() => {
        this.obj1.a = this.test + 'word'
      }, 1000)
    }
  },
  mounted () {
    this.test = 'hello'
  }
})

上述例子中，当在模版中调用getObj.a时，若是没有setTimeout这异步操做，直接返回一个值是能够直接在模版中显示的，可是因为加异步操做就会致使没有返回值同时调用对象的属性，就会报错，而调用obj1.a却不同，模版会先显示hello，而后在触发了watch属性时，setTimeout触发，一秒钟以后模版会显示helloword，这就watch中可使用异步函数，而computed不行的缘由

总结

但愿看了这篇文章能对你区分methods、computed、watch的用法能有所帮助。
这篇文章若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞收藏