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

本篇内容主要讲解“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中计算属性和侦听器怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！