本篇内容主要讲解“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中计算属性和侦听器怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
