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 Accessor实现说明
Dec 06 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
bootstrap css样式之表单
Jan 19 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python使用OpenCV进行标定
2018/05/08 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python实现一个简单的ping工具方法
2019/01/31 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
linux面试题参考答案(2)
2015/12/06 面试题
仓库门卫岗位职责
2013/12/22 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
给校长的建议书范文
2015/09/14 职场文书
小组组名及励志口号
2015/12/24 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
python双向链表实例详解
2022/05/25 Python