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知识,请关注本博主~~