当前位置: 首页 > news >正文

vue基础之8:computed对比watch

欢迎来到“雪碧聊技术”CSDN博客!

在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游,携手提升技术能力,共创美好未来!感谢您的关注与支持,期待在“雪碧聊技术”与您共同成长!

目录

一、computed对比watch

1、通过两种方式,完成如下案例

①使用computed完成案例

②使用watch完成案例

2、对比上述两种方法

①短期看,看似computed比较省事,watch比较麻烦。但是computed能做到的事,watch都可以做到,但是watch能做到的,computed不一定能做到。

②长期看,还是watch比较好,虽然比较麻烦,但是watch里面能做很多事情。

举例:当我们在输出框中,输出分类名称时,可以发送异步请求,查询后台该分类的相关内容,并展示到下拉框内

3、注意一个细节:不是vue实例的函数的话,如果写成()=>箭头函数,那么this默认往上面找一层。

①举例1:setTimeOut不是vue实例的函数,因此要想在该函数中使得this指向vue实例,则需要写成箭头函数的形式

②举例2:如果某个函数是vue实例的函数,则一定不要写成箭头函数的形式,因为这样才会使得this指向vue实例本身。

4、总结

 结语


一、computed对比watch

1、通过两种方式,完成如下案例

①使用computed完成案例

运行结果:

②使用watch完成案例

运行结果:

2、对比上述两种方法

①短期看,看似computed比较省事,watch比较麻烦。但是computed能做到的事,watch都可以做到,但是watch能做到的,computed不一定能做到。

②长期看,还是watch比较好,虽然比较麻烦,但是watch里面能做很多事情。

举例:当我们在输出框中,输出分类名称时,可以发送异步请求,查询后台该分类的相关内容,并展示到下拉框内

当然我们把计时1秒这个动作,换成查询后台的axios请求,即可完成上述要求。

3、注意一个细节:不是vue实例的函数的话,如果写成()=>箭头函数,那么this默认往上面找一层。

①举例1:setTimeOut不是vue实例的函数,因此要想在该函数中使得this指向vue实例,则需要写成箭头函数的形式

②举例2:如果某个函数是vue实例的函数,则一定不要写成箭头函数的形式,因为这样才会使得this指向vue实例本身。

4、总结

 结语

以上就是vue中的computed和watch二者的对比,想了解更多的vue知识,请关注本博主~~

http://www.lryc.cn/news/496562.html

相关文章:

  • Luban数据插件的用法
  • 指针(上)
  • 张伟楠动手学强化学习笔记|第一讲(上)
  • python脚本:Word文档批量转PDF格式
  • 性能测试常见面试问题和答案
  • uniapp进阶技巧:如何优雅地封装request实例
  • 实验五、流式视频服务程序mjpg-streamer移植实验
  • (长期更新)《零基础入门 ArcGIS(ArcMap) 》实验三----学校选址与路径规划(超超超详细!!!)
  • L16.【LeetCode笔记】前序遍历
  • 泰州榉之乡全托机构探讨:自闭症并非家庭的 “末日”
  • BiGRU:双向门控循环单元在序列处理中的深度探索
  • 【vue-router】Vue-router如何实现路由懒加载
  • Linux网络编程基础
  • MySQL中的幻读问题
  • AI后端工程师面试题的内容
  • MFC工控项目实例三十五读取数据库数据
  • OpenWrt -制作ubifs文件系统的固件
  • C++ - 继承
  • 华为服务器使用U盘重装系统
  • 网络分层模型( OSI、TCP/IP、五层协议)
  • 前端开发 之 15个页面加载特效上【附完整源码】
  • Spring Boot使用JDK 21虚拟线程
  • 《从0到1常用Map集合核心摘要 + 不深不浅底层核心》
  • 12 设计模式之工厂方法模式
  • spaCy 入门与实战:强大的自然语言处理库
  • python包的管理和安装——笔记
  • Vue前端页面内嵌套本项目iframe窗口的通信传输方式
  • 【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题(小心踩坑)
  • 用于LiDAR测量的1.58um单芯片MOPA(一)
  • 【GPT】代谢概念解读