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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
JS定时器实例详细分析
Oct 11 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
浅析Vue 生命周期
Jun 21 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 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
在php和MySql中计算时间差的方法
2011/04/22 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP加密技术的简单实现
2016/09/04 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python之用户输入的实例
2018/06/22 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python中is和==的区别详解
2018/11/15 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python 图像增强算法实现详解
2021/01/24 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
个人自我鉴定写法
2013/11/30 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Python数组变形的几种实现方法
2022/05/30 Python
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript