Vue知识点总结(7)——计算属性computed（超级详细）

news/2024/7/10 2:45:02 标签: vue, js, html, 前端

这期的主题是Vue的计算属性computed。
我们都知道插值表达式{{}}，{{}}可以实现双向的数据绑定，并且可以在其中进行一些常规的算数运算和逻辑运算。
但是模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，在之前我们可以使用methods实现这种效果，但是computed相比methods来说，速度更快，因为computed是基于依赖缓存的，缓存的特点就是一个字，快！
我们来看一下具体的代码实现。

这是利用methods完成字符串反转的方法。

html"><div id="app">
    <h3>{{reverseMsg()}}</h3>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        },
        methods: {
             reverseMsg:function(){
               return  this.msg.split('').reverse().join('');
            },
        }
    });
</script>

在这里插入图片描述

这是利用计算属性computed实现字符串反转的方法。

html"><div id="app">
    <h3>{{reverseMsg}}</h3>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!',
        },
        computed: {
            reverseMsg:function(){
               return  this.msg.split('').reverse().join('');
            },        }
    });
</script>

在这里插入图片描述
都可以正常地完成我们的需求，但是，它们之间还是有区别的。
Vue的官方文档为我们提示了

计算属性是基于它们的响应式依赖进行缓存的，只有相应的响应式依赖发生改变时它们才会重新求值。

这句话是啥意思呢，就是，methods实现这个反转字符串的时候，每次都会执行reverseMsg这个函数，请注意，是每次。。。
但是computed实现这个反转字符串的时候，只有第一次才真正的执行这个函数，并把结果存入缓存中，之后再需要用到的时候，它直接去缓存里面取，不会重复执行这个函数。这还是很有意义的，computed才能在这种需求中实现最佳性能。

html"><div id="app">
    <h3>{{reverseMsg}}</h3>
    <h3>{{fullName}}</h3>
    <button @click="handeClick">改变</button>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!',
            firstName:'Creator',
            lastName:'Ray'
        },
        methods: {
            handeClick(){
                this.msg = '计算属性computed生效!';
                this.lastName = 'God';
            }
        },
        computed: {
            reverseMsg:function(){
               return  this.msg.split('').reverse().join('');
            },
            fullName:function(){
                return this.firstName + this.lastName;
            }
        }
    });
</script>

再看一下这段代码，我们用计算属性关联了fullName，并且我们写了一个按钮，用来改变fullName中这些data值得数据，看一下计算属性发生什么改变。
在这里插入图片描述
很明显，我们点击按钮之后，msg和lastName的值都发生了变化，并且，因为我们是用计算属性实现这一功能的，所以计算属性的reverseMsg和fullName也被执行了。这说明计算属性的绑定是持久性的，并且当对应的值发生变化后，计算属性会立即被执行，还是很方便的。