温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中计算属性和侦听器怎么使用

发布时间:2021-11-29 11:24:07 来源:亿速云 阅读:135 作者:iii 栏目:开发技术

本篇内容主要讲解“Vue中计算属性和侦听器怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中计算属性和侦听器怎么使用”吧!

在Vue中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们会使用计算属性

基本用法:

computed:{
A:function(){
return B+C
}
}

如果学过面向对象语言,应该知道面向对象的标准之一封装,需要getter也需要setter,而上面的写法,实际上只写了getter而没有写setter

那么我们就可以换种写法

computed:{
A:{
get:function(){
return B+C
}
set:function(newVal){
var names=newVal.splir(' ')
this.B=names[0]
this.C=names[1]
}
}
}

这样写就明了很多了

这个时候,可能会奇怪,似乎计算属性能做的用方法来也可以做

也就是

methods: {
  A: function () {
    return B+C
  }
}

实际上,计算属性是基于他们的响应式依赖进行缓存的,而方法不存在缓存

而计算属性的缓存也有它的坏处,当重复调用时,就会发生一些多余的步骤,导致大量不必要的运算

这时候就需要

cache:false

关闭缓存

再来看他的缓存方式,计算属性是具有依赖性的,依赖data中的数据,如果数据改变,相应的就会改变,这就要说到另外一个东西:侦听器
什么是侦听器呢?侦听器用来侦听数据的变化,如果数据发生变化就会触发绑定的方法
侦听器又有自己的应用场景:数据变化执行时异步或开销比较大的操作
基本使用:

watch:{
firstN:function(val){
this.A=val+this.C
}
}

侦听器,相比于计算属性来说,是很容易重复的,所以Vue也建议,通常更好的做法是使用计算属性而不是watch

到此,相信大家对“Vue中计算属性和侦听器怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI