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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
基于mysql的bbs设计(五)
2006/10/09 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python3 求约数的实例
2019/12/05 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python LMDB库的使用示例
2021/02/14 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
施工安全承诺书
2014/05/22 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
四年级数学教学反思
2016/02/16 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS