Vue的计算属性和侦听器

两者的区别:

computed:依赖多个变量计算出一个变量,具有缓存机制,依赖值不变的时候,会复用计算值,不能执行异步操作,

watch:通常监听一个变量,可以执行异步操作

简单记就是:computed是多对一,watch是一对多

1|0计算属性(computed)

为什么要用计算属性?

当一个数据需要复杂的计算的时候,你可以在模板里面直接计算,但是太过麻烦,也不利于维护,这就需要计算属性

计算属性是放在vue实例的computed中定义的,与data,methods类似,都是定义函数

例如:

要计算这个数据里面所有的price

list: [ { id: 1, name: "三国", price: 118 }, { id: 2, name: "水浒", price: 210 }, { id: 3, name: "红楼", price: 88 }, { id: 4, name: "西游", price: 65 }, ],

我们可以在模板里

<<h2>总价格:{{list[0].price+list[1].price+list[2].price+list[3].price}}</h2>

用计算属性来写

computed: { sum() { let total = 0; this.list.forEach((item) => { total += item.price; }); return total; }, },

再看模板里面

 <h2>总价格:{{ sum }}</h2>

2|0计算属性的set和get方法

2|1详细的计算属性写法

computed: { sum:{ set: function () { }, get: function () { let total = 0; this.list.forEach((item) => { total += item.price; }); return total; } } }

get是读取,默认就是get方法,直接就写就可以

当数据发生改变的时候,你要重新计算,这个时候就需要set了

<template> <div> <p>{{ num }}</p> <p>{{ num1 }}</p> <button @click="changeNum1">点击改变num1的值</button> </div> </template> <script> export default { data() { return { num: 8, }; }, computed: { num1: { get: function () { //必须有返回值,用来获取属性,称为get函数 return this.num - 1; }, set: function (val) { console.log("修改num1的值"); this.num = 11; }, }, }, methods: { changeNum1: function () { this.num1 = 11; }, }, }; </script>

没有点击前点击之后

计算属性与method的比较?

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

相比之下,每当触发重新渲染时,调用method方法将总会再次执行函数

为什么需要缓存? 避免重复执行大数据量的计算


3|0侦听器(watch)

监听vue实例上某个数据的变化

侦听器完整的写法:

watch: { num: {//要监听的是哪个数据 handler(newValue, oldValue) { console.log(newValue, oldValue);//新的数据,旧的数据 }, // deep: 深度监听 默认为false true为开启深度监听 // immediate: 立即执行 默认为false true为开启 }, },

1.第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
2.第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)缺点是 会影响性能,尤其是对象内结构嵌套过深。
3.第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

什么情况下,需要使用监听器?

当需要在数据变化时,执行异步或开销较大的操作时,这个方式是最有用的

比如说可以设置中间状态

 

 

 

 

 

 

 

 

 

 


__EOF__

本文作者长安
本文链接https://www.cnblogs.com/jingxin01/p/16414758.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   长安·念  阅读(79)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示