Vue中的methods、watch、computed的区别-白红宇

Vue中的methods、watch、computed的区别

阅读量：5912 次

发布时间：2019-06-19

本文共 2949 字，大约阅读时间需要 9 分钟。

看到这个标题就知道这篇文章接下来要讲的内容，我们在使用vue的时候methods、watch、computed这三个特性一定经常使用，因为它们是非常的有用，但是没有彻底的理解它们的区别和各自的使用场景，也很难用好它们，希望接下来的介绍为你答疑解惑。

computed

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

计算属性计算时所依赖的属性一定是响应式依赖，否则计算属性不会执行

计算属性是基于依赖进行缓存的，就是说在依赖没有更新的情况，调用计算属性并不会重新计算，可以减少开销我们来看一个相关的例子：


     
     
      {
   { arr.join('') }}
     
 
     
      {
   { arr1 }}
     
 
     
      {
   { getDate }}
     
 
     
      {
   { getDate1 }}

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) }})

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

看上面的例子，我们在写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，下面来看一个例子：


     
     
        {
   { matching(item) }}

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'   }  } }})

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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

watch

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


     
     
      {
   { obj1.a }}

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的用法能有所帮助。这篇文章如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏

转载于:https://my.oschina.net/u/3970421/blog/2994738

你可能感兴趣的文章