Vue-计算属性computed和侦听器watch -例子解析

假设现在有一个需求需要实现,就是把下面message中的的字符串翻转过来,期望得到结果是“!euV olleH ”

复制代码
const vm =new Vue({
      el: '#app',
      data: {
                message: 'Hello Vue!',
                
            },

})
复制代码

 

如果我们不使用计算属性的话,可以这样做

<div id="root">
 <!-- 先切开,在反转,最后缝合 -->
{{message.split('').reverse().join('')}}
</div>

但是如果这样的话就会运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。

复制代码
const vm =new Vue({
      el: '#app',
      data: {
                message: 'Hello Vue!',
                
            },
      computed: {
                reverseMsg() {
                    return this.message.split('').reverse().join('')
                }
            },

})
复制代码

这样的话,只需要

<div id="root">
{{reverseMessage}}
</div>

即可在控制台看到期望结果

 

 

计算属性computer总结:

总结:

1.变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。

2.根据传入的变量的变化 进行结果的更新。

3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。

 

 侦听器watch:

 data: {
                message: 'Hello Vue!',
                num: 0
            },

 

 watch: {
                //    函数名: 侦听谁就跟谁同名
                num(newVal, oldVal) {
                    console.log(newVal,oldVal);
                    console.log('祝某某小朋友' + newVal + '岁生日快乐')
                }

            }

html代码:

 <button @click="num++">点击增加1</button>
        <p>{{num}}</p>

点击两次button按钮后,

控制台输出:

 

 

 

侦听器watch:

上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。

 

计算属性 和属性监听的区别:

1.计算属性变量在computed中定义,属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。

 

posted @   Ynline  阅读(115)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示