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。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。
分类:
#个人成长
标签:
JavaScript
, Vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!