Vue中的methods、watch、computed的区别


Posted in Javascript onNovember 26, 2018

看到这个标题就知道这篇文章接下来要讲的内容,我们在使用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'
   }
  }
 }
})

Vue中的methods、watch、computed的区别

上面的例子就是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的用法能有所帮助。

这篇文章如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞收藏

Javascript 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
React组件的三种写法总结
Jan 12 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
小程序自定义日历效果
Dec 29 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
小程序实现筛子抽奖
May 26 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 #Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 #Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 #Javascript
vue中tab选项卡的实现思路
Nov 25 #Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 #Javascript
vscode 开发Vue项目的方法步骤
Nov 25 #Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
PHP输出日历表代码实例
2015/03/27 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
js模拟微博发布消息
2017/02/23 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python如何实现单链表的反转
2020/02/10 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python 在局部变量域中执行代码
2020/08/07 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
好学生评语大全
2014/05/05 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
指导老师鉴定意见
2015/06/05 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
python 三边测量定位的实现代码
2021/04/22 Python