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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
详解vuex的简单使用
Mar 12 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
学习jQuey中的return false
2015/12/18 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
高中生班主任评语
2014/04/25 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
会计稽核岗位职责
2015/04/13 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL
Golang jwt身份认证
2022/04/20 Golang