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