【Vue】谈Vue的依赖追踪系统 ——搞懂methods watch和compute的区别和联系
从作用机制和性质上看待methods,watch和computed的关系
作用机制上
从性质上看
computed:{fullName: function () { return this.firstName + lastName } }
watch: {firstName: function (val) { this.fullName = val + this.lastName } }
watch和computed的对比
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 = '橡胶海贼团'
// 更改watch选项中监控的主数据 vm.haiZeiTuan_Name = '肉肉海贼团'
demo:
computed擅长处理的场景:一个数据受多个数据影响
var vm = new Vue({el: '#app',/*data选项中的数据:firstName,secName,thirdNamecomputed监控的数据: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:
但是:
// 将“D”改为“H” vm.secName = 'H' // 打印路飞的全名 console.log(vm.luFei_Name)
methods不处理数据逻辑关系,只提供可调用的函数
new Vue({el: '#app',template: '<div id="app"><p>{{ say() }}</p></div>',methods: {say: function () {return '我要成为海贼王'}} })
从功能的互补上看待methods,watch和computed的关系
利用computed处理methods存在的重复计算情况
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选项中设置的计算属性——computedDategetComputedDate: function () {alert(this.computedDate)}},computed: {computedDate: function () {return new Date()}}
利用computed处理watch在特定情况下代码冗余的现象,简化代码
new Vue({el: '#app',data: {fullName: '彭湖湾',firstName: '彭',secName: '湖',thirdName: '湾'},// watch中的代码显然是同类型,重复的,它并不简洁,也不优雅 watch: {firstName: function (newValue) {this.fullName = newValue + this.secName + this.thirdNameconsole.log(this.fullName)},secName: function (newValue) {this.fullName = this.firstName + newValue + this.thirdNameconsole.log(this.fullName)},thirdName: function (newValue) {this.fullName = this.firstName + this.secName + newValueconsole.log(this.fullName)}} })
new Vue({el: '#app',data: {fullName: '彭湖湾',firstName: '彭',secName: '湖',thirdName: '湾'},// 对watch中的代码进行重构,实现同样效果computed: function () {this.fullName = this.firstName + this.secName + this.thirdNameconsole.log(this.fullName)} })
其实啊,我只是把你们喝咖啡的时间,都用来喝啤酒而已
【Vue】谈Vue的依赖追踪系统 ——搞懂methods watch和compute的区别和联系相关推荐
- vue族谱架构_【Vue】谈Vue的依赖追踪系统 ——搞懂methods watch和compute的区别和联系...
之前一直在博客园写作,最近几天才开的知乎专栏,才疏学浅, 谬误之处请不吝于评论区指教,谢谢大家.从作用机制和性质上看待methods,watch和computed的关系 watch和computed的 ...
- 基于Vue和SpringBoot的毕业生追踪系统的设计和实现
作者主页:Designer 小郑 作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
- 计算机科学与技术要机械硬盘,机械硬盘避坑大法:一文搞懂PMR和SMR有什么区别...
原标题:机械硬盘避坑大法:一文搞懂PMR和SMR有什么区别 存储市场上一直存在固态硬盘(SSD)和机械硬盘(HDD)的竞争.论综合性能,SSD远高于HDD,是大家选购存储设备时的理想选择.早期消费级S ...
- Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现 什么是pinia pinia相比vuex的优势 为什么要使用pinia? 基本示例 知识回调(不懂就看这儿 ...
- 就业信息追踪|基于Springboot+Vue开发实现就业信息追踪系统
作者主页:编程千纸鹤 作者简介:Java.前端.Pythone开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路 关注作者有好 ...
- 【Vue】一个案例带你搞懂methods、watch及computed的使用规则
本文我们通过案例来介绍一下vue中 watch 和 computed 的使用规则,案例效果如下: 以上案例就是实现一个简单的 名称拼接处理.实现的方式有很多,本文我们将采用以下三种方式来实现. 1.D ...
- pycharm导入jieba包_3分钟带你搞懂Python模块、包的区别和使用
一.模块和包的定义 模块的定义:任何*.py 的文件都可以当作模块使用import 导入 包的定义:包含一个__init__.py和其他模块.其他子包的一个目录 实际项目中,所谓的包和模块分别代表什么 ...
- python 包和模块的区别_3分钟带你搞懂Python模块、包的区别和使用
一.模块和包的定义 模块的定义:任何*.py 的文件都可以当作模块使用import 导入 包的定义:包含一个__init__.py和其他模块.其他子包的一个目录 实际项目中,所谓的包和模块分别代表什么 ...
- shell脚本回车换行_终于搞懂了回车与换行的区别
关于换行和回车其实平时我们不太在意,所以关于两者的区别也不太清楚,在平时开发时可能会遇到一些文件处理的问题,放到不同的操作系统上出现各种坑.那么回车和换行到底有哪些区别呢?今天咱们就来总结一下. 1. ...
最新文章
- 你需要启用steam社区界面功能以进行购买_绝地求生购买衣服方法
- 第三章-分布式文件系统HDFS
- VS2008生成DLL文件的方法、引用dll文件以及意义
- 启动ipython内核发生错误_ipython3启动
- java猜数字小游戏_Java实现简单猜数字小游戏
- 字符串对象的各种方法
- MSP430F5529 DriverLib 库函数学习笔记(十)SPI驱动墨水屏
- 数据链路层之差错控制(检错编码和纠错编码)-(奇偶校验码、CRC循环冗余码、海明码)...
- linux网络子系统分析(五)——netfilter
- 推荐10个最好用的数据采集工具
- vue抽屉_vue 自定义抽屉组件 仿 iview
- 大学计算机专业英语期末考试,河南大学计算机专业英语试题
- 为什么苹果录屏没有声音_苹果手机自带录屏功能,打开声音录制方法
- python重启路由器_python 实现重启路由器
- mysql实践周心得_实践周心得体会
- oracle间歇性,oracle生产环境间歇性宕机ORA-04030
- flutter坑奇遇记
- 神经网络学习小记录19——微调VGG分类模型训练自己的数据(猫狗数据集)
- spring学习--------AOP的实现
- 朋友借了钱,为什么烦恼的却是我?