谈谈VUE种methods watch和compute的区别和联系


Posted in Javascript onAugust 01, 2017

从作用机制和性质上看待methods,watch和computed的关系

图片标题[原创]:《他三个是啥子关系呢?》

谈谈VUE种methods watch和compute的区别和联系 

首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 

而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比:

1.methods和(watch/computed)的对比

2.watch和computed的对比

作用机制上

1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数

 【总结】:methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动调用,完成我们希望完成的作用

从性质上看

1.methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)

2.computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上),

例如:

computed:{
  fullName: function () { return this.firstName + lastName }
}

你在取用的时候,用this.fullName去取用,就和取data一样(不要当成函数调用!!)

3.watch:类似于监听机制+事件机制:

例如:

watch: {
  firstName: function (val) { this.fullName = val + this.lastName }
}

firstName的改变是这个特殊“事件”被触发的条件,而firstName对应的函数就相当于监听到事件发生后执行的方法

watch和computed的对比

说了这么多,下面先对watch和computed

谈谈VUE种methods watch和compute的区别和联系

首先它们都是以Vue的依赖追踪机制为基础的,它们的共同点是:都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化

我们当然可以自己写代码完成这一切,但却很可能造成写法混乱,代码冗余的情况。Vue为我们提供了这样一个方便的接口,统一规则

但watch和computed也有明显不同的地方:

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景:一个数据影响多个数据

2.computed擅长处理的场景:一个数据受多个数据影响

watch擅长处理的场景:一个数据影响多个数据

 谈谈VUE种methods watch和compute的区别和联系

(具体的看上图就ok,这里不再赘述)

对于watch,我们先从一个场景说起

在《海贼王》里面,主角团队的名称叫做:“草帽海贼团”

所以我们把船员依次称为:

草帽海贼团索隆,草帽海贼团娜美,以此类推。。。

我们希望:当船团名称发生变更的时候,这艘船上所有船员的名字一起变更!!

例如:

有一天,船长路飞为了加强团队建设,弘扬海贼文化,决定“草帽海贼团”改名为“橡胶海贼团”(路飞是橡胶恶魔果实能力者)

我们代码如下: 

var vm = new Vue({
 el: '#app',
 /*
  data选项中的数据:
  1.haiZeiTuan_Name --> 海贼团名称
  2.船员的名称 = 海贼团名称(草帽海贼团) + 船员名称(例如索隆)
 
  这些数据里存在这种关系:
  (多个)船员名称数据 --> 依赖于 --> (1个)海贼团名称数据
  一个数据变化 ---> 多个数据全部变化
 */
 data: {
  haiZeiTuan_Name: '草帽海贼团',
  suoLong: '草帽海贼团索隆',
  naMei: '草帽海贼团娜美',
  xiangJiShi: '草帽海贼团香吉士'
 },
 /*
  在watch中,一旦haiZeiTuan_Name(海贼团名称)发生改变
  data选项中的船员名称全部会自动改变 (suoLong,naMei,xiangJiShi)
  并把它们打印出来
 */
 watch: {
  haiZeiTuan_Name: function (newName) {
   this.suoLong = newName + '索隆'
   this.naMei = newName + '娜美'
   this.xiangJiShi = newName + '香吉士'
   console.log(this.suoLong)
   console.log(this.naMei)
   console.log(this.xiangJiShi)
  }
 }
})
 
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '橡胶海贼团'

demo:

谈谈VUE种methods watch和compute的区别和联系

于是船员们的称号前缀都被统一修改了!(原本是“草帽海贼团”)

但是我们的路飞船长又突发奇想:我这么喜欢吃肉,干脆我们叫做“肉肉海贼团”好了吧!

我们把最下面的代码改为:

// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '肉肉海贼团'

demo:

谈谈VUE种methods watch和compute的区别和联系 

computed擅长处理的场景:一个数据受多个数据影响

谈谈VUE种methods watch和compute的区别和联系 

我们再从一个场景说起

路飞的全名叫做:蒙奇-D-路飞,他想成为海贼王,但路飞的爷爷卡普(海军英雄)因此感到非常恼怒,于是把“路飞”改成了叫“海军王”,希望他能改变志向

代码如下:

var vm = new Vue({
 el: '#app',
 /*
  data选项中的数据:firstName,secName,thirdName
  computed监控的数据:lufei_Name
  两者关系: lufei_Name = firstName + secName + thirdName
  所以等式右边三个数据任一改变,都会直接修改 lufei_Name
 */
 data: {
  // 路飞的全名:蒙奇·D·路飞
  firstName: '蒙奇',
  secName: 'D',
  thirdName: '路飞'
 },
 computed: {
  luFei_Name: function () {
   return this.firstName + this.secName + this.thirdName
  }
 }
})
 
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'
// 打印路飞的全名
console.log(vm.luFei_Name)

demo:

谈谈VUE种methods watch和compute的区别和联系 

 但是:

有一天,路飞的逗逼爷爷卡普,一不小心发现可能把族谱搞错了,实际上,他们不是“D”之一族,而是“H”一族,也就是说,“蒙奇-D-路飞”可能要叫做“蒙奇-H-路飞”了

将最后一段代码改为如下:

// 将“D”改为“H”
vm.secName = 'H'
// 打印路飞的全名
console.log(vm.luFei_Name)

demo:

谈谈VUE种methods watch和compute的区别和联系 

methods不处理数据逻辑关系,只提供可调用的函数

相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数 

new Vue({
 el: '#app',
 template: '<div id="app"><p>{{ say() }}</p></div>',
 methods: {
  say: function () {
   return '我要成为海贼王'
  }
 }
})

谈谈VUE种methods watch和compute的区别和联系

从功能的互补上看待methods,watch和computed的关系

 谈谈VUE种methods watch和compute的区别和联系 

在很多时候,computed是用来处理你使用watch和methods的时候无法处理,或者是处理起来并不太恰当的情况的

利用computed处理methods存在的重复计算情况

谈谈VUE种methods watch和compute的区别和联系

1.methods里面的函数就是一群“耿直Boy”,如果有其他父函数调用它,它会每一次都“乖乖”地执行并返回结果,即使这些结果很可能是相同的,是不需要的

2.而computed是一个“心机Boy”,它会以Vue提供的依赖追踪系统为基础,只要依赖数据没有发生变化,computed就不会再度进行计算

例子: 

new Vue({
 el: '#app',
 // 设置两个button,点击分别调用getMethodsDate,getComputedDate方法
 template: '<div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>',
 methods: {
  getMethodsDate: function () {
   alert(new Date())
  },
  // 返回computed选项中设置的计算属性——computedDate
  getComputedDate: function () {
   alert(this.computedDate)
  }
 },
 computed: {
  computedDate: function () {
   return new Date()
  }
 }

 第一次点击methods按钮:

谈谈VUE种methods watch和compute的区别和联系 

第二次点击methods按钮:

谈谈VUE种methods watch和compute的区别和联系

注意两次点击methods返回的时间是不同的!!

 第一次点击computed按钮:

谈谈VUE种methods watch和compute的区别和联系 

第二次点击computed按钮:

谈谈VUE种methods watch和compute的区别和联系 

 注意两次点击computed返回的时间是相同的!!

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

 【注意】为什么两次点击computed返回的时间是相同的呢?new Date()不是依赖型数据(不是放在data等对象下的实例数据),所以computed只提供了缓存的值,而没有重新计算

 只有符合:1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。 

而methods下的数据,是每次都会进行计算的 

利用computed处理watch在特定情况下代码冗余的现象,简化代码

谈谈VUE种methods watch和compute的区别和联系 

new Vue({
 el: '#app',
 data: {
  fullName: '彭湖湾',
  firstName: '彭',
  secName: '湖',
  thirdName: '湾'
 },
 // watch中的代码显然是同类型,重复的,它并不简洁,也不优雅
 watch: {
  firstName: function (newValue) {
   this.fullName = newValue + this.secName + this.thirdName
   console.log(this.fullName)
  },
  secName: function (newValue) {
   this.fullName = this.firstName + newValue + this.thirdName
   console.log(this.fullName)
  },
  thirdName: function (newValue) {
   this.fullName = this.firstName + this.secName + newValue
   console.log(this.fullName)
  }
 }
})

watch中的代码显然是同类型,重复的,它并不简洁,也不优雅,所以我们可以把它变成这样

new Vue({
 el: '#app',
 data: {
  fullName: '彭湖湾',
  firstName: '彭',
  secName: '湖',
  thirdName: '湾'
 },
 // 对watch中的代码进行重构,实现同样效果
 computed: function () {
  this.fullName = this.firstName + this.secName + this.thirdName
  console.log(this.fullName)
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
Vue登录主页动态背景短视频制作
Sep 21 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
Angular4学习笔记之实现绑定和分包
Aug 01 #Javascript
详解js静态资源文件请求的处理
Aug 01 #Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 #Javascript
jQuery上传插件webupload使用方法
Aug 01 #jQuery
js实现鼠标拖拽多选功能示例
Aug 01 #Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python 实现兔子生兔子示例
2019/11/21 Python
python数据化运营的重要意义
2019/11/25 Python
没编程基础可以学python吗
2020/06/17 Python
python实现视频压缩功能
2020/12/18 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
运动会宣传口号
2014/06/09 职场文书
金融与证券专业求职信
2014/06/22 职场文书
生活小常识广播稿
2014/09/16 职场文书
中小企业员工手册范本
2015/05/14 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android