Vue计算属性computed怎么应用

本文小编为大家详细介绍“Vue计算属性computed怎么应用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue计算属性computed怎么应用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、虚拟空间、营销软件、网站建设、湖滨网站维护、网站推广。

Vue计算属性computed怎么应用

Vue中的计算属性是所有属性的计算，而这些计算都是变向的在过滤值，通过数据的不断变化计算出来不同的值和操作不同的方法. 而在Vue中，会使用到计算属性的场景常见的有：

模板内的表达式
属性v-bind里可以进行的表达式。
指令中可以进行的表达式

以上三者的主要优势是简洁。如果只是一个小操作，比如说一些简单的数值++，字符拼接，三元表达式，那么使用相当方便。当然，以上方式也有自己的劣势。一旦要处理的逻辑复杂，代码量就会变得大得多，而且难于维护。比如说用到if语句来控制流程。那么这个时候可能会想到用filter，咱们来看一个简单的示例。


    {{count + '分'}}
    
        
    
    {{ message.split(' ').reverse().join(' ') }}

let app = new Vue({
    el: '#app',
    data () {
        return {
            count: 0,
            message: ''
        }
    }
})

效果如下：

从上面的示例中我们可以看出：

我们在模板内使用字符串拼接，{{count + '分'}}
通过v-bind指定绑定了一个click事件，它只做了一件事情，就是count++，button每点击一次，count值增加1，注意，这里并没有使用methods
input通过v-model做了数据双向绑定，绑定了message，并且在p标签中对message字符串进行反转。

在p标签中对message进行计算转换的时候，是不是觉得语义不是很强烈，那么用什么办法更好呢？这就需要我们使用到前面提到的filter。

使用 filter

我们可以使用filter来修改前面的示例。事实下，在Vue中使用filter具有自己的优势，也具有自己的劣势：

优势：filter给我们用于计算和过滤一些模板表达式和v-bind属性表达式一些弊端的地方进行计算，他们会返回当前计算的值，可以进行传参在多地方共用这个过滤方法
劣势：如果我们要计算多个数据不同变化结合而成的地方，那么filter就比较难过滤到了，本质上filter就是一个一对一的行为，对单个数据进行过滤，可以进行传参，同方法，但不同参

把上面的示例，用filter修改之后就像下面这样：


    {{count + '分'}}
    
        
    
    {{ message | reverseString }}

在这个示例中，我们使用filter来实现，很明显代码量多了那么一点点，但整体的语意化就变得相当明显了，让人一看这里就要进行一些过滤计算，看到reverseString就知道是字符串反转。

computed

前面说了这么多，其实我们都是为了给computed的应用场景做一个铺垫。那问题又来了，computed可以做些什么？又能应用于什么场景呢？

Vue中的computed其实规避了模板语法和filter两个所有的劣势，他的优势在于通过计算所有依赖的数据进行计算，然后返回一个值，记住可以依赖方法里所有的数据，只要一个数据发生变化，则会重新计算，来更新视图的改变。是不是很意思，迫切的想知道它是怎么玩。

咱们还是拿使用场景来说事吧。先给大家演示一个简单实用的应用场景，后面再做一个更好玩一点的应用场景。

大家是否还记得，我们在玩微博的时候，发微博会有一个字数限制，比如说只限输入140个字符。为了让用户体验更好，在文本域中输入内容的时候，同时有一个提示信息，告诉用户你还能输入多少字符。那么使用Vue来做这样的事情就会显得容易的多。比如下面这个示例：

比赛时间：{{ time }}s

直播播报：{{ result }}

中国队进球数：{{ team.china }} 点击中国队进一球

韩国队进球数：{{ team.korea }} 点击韩国队进一球

let app = new Vue({ el: '#app', data () { return { time: 0, team: { china: 0, korea: 0 } } }, created () { let time = setInterval(() => { this.time++ if (this.time == 90) { clearInterval(time) } }, 1000) }, computed: { result () { if (this.time < 90) { if (this.team.china > this.team.korea) { return '中国队领先' } else if (this.team.china < this.team.korea) { return '韩国领先' } else { return '双方僵持' } } else { if (this.team.china > this.team.korea) { return '中国队赢' } else if (this.team.china < this.team.korea) { return '韩国队赢' } else { return '平局' } } } } })

比赛时间：{{ time }}s

直播播报：{{ result }}

中国队进球数：{{ team.china }} 点击中国队进一球

韩国队进球数：{{ team.korea }} 点击韩国队进一球

let app = new Vue({ el: '#app', data () { return { time: 0, team: { china: 0, korea: 0 }, result: '双方僵持' } }, created () { let time = setInterval(() => { this.time++ if (this.time == 90) { clearInterval(time) } }, 1000) }, wacth: { time (value, oldval) { if (value < 90) { if (this.team.china > this.team.korea) { this.result = '中国队领先' } else if (this.team.china < this.team.korea) { this.result = '韩国队领先' } else { this.result = '双方僵持' } } else { if (this.team.china > this.team.korea) { this.result = '中国队赢' } else if (this.team.chian < this.team.korea) { this.result = '韩国队赢' } else { this.result = '平局' } } }, team (value, oldval) { if (this.time < 90) { if (value.china > value.korea) { this.result = '中国队领先' } else if (value.china < value.korea) { this.result = '韩国队领先' } else { this.result = '双方僵持' } } else { if (value.china > value.korea) { this.result = '中国队赢' } else if(value.chian < value.korea) { this.result = '韩国队赢' } else { this.result = '平局' } } } } })

大橙子网站建设，新征程启航

Vue计算属性computed怎么应用

使用 filter

computed

比赛时间：{{ time }}s

直播播报：{{ result }}

methods vs computed

computed vs watch

比赛时间：{{ time }}s

直播播报：{{ result }}

watch应用场景

其他资讯