Vue的计算属性和侦听器
两者的区别:
computed:依赖多个变量计算出一个变量,具有缓存机制,依赖值不变的时候,会复用计算值,不能执行异步操作,
watch:通常监听一个变量,可以执行异步操作
简单记就是:computed是多对一,watch是一对多
1|0计算属性(computed)
为什么要用计算属性?
当一个数据需要复杂的计算的时候,你可以在模板里面直接计算,但是太过麻烦,也不利于维护,这就需要计算属性
计算属性是放在vue实例的computed中定义的,与data,methods类似,都是定义函数
例如:
要计算这个数据里面所有的price
我们可以在模板里
用计算属性来写
再看模板里面
2|0计算属性的set和get方法
2|1详细的计算属性写法
get是读取,默认就是get方法,直接就写就可以
当数据发生改变的时候,你要重新计算,这个时候就需要set了
计算属性与method的比较?
不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用method方法将总会再次执行函数
为什么需要缓存? 避免重复执行大数据量的计算
3|0侦听器(watch)
监听vue实例上某个数据的变化
侦听器完整的写法:
1.第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
2.第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)缺点是 会影响性能,尤其是对象内结构嵌套过深。
3.第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
什么情况下,需要使用监听器?
当需要在数据变化时,执行异步或开销较大的操作时,这个方式是最有用的
比如说可以设置中间状态
__EOF__

本文链接:https://www.cnblogs.com/jingxin01/p/16414758.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!