Vue.js--计算属性

梦里梦外; 2021-08-13 15:06 473阅读 0赞

#### 计算属性 ####

计算属性用于解决表达式过长或逻辑复杂时的问题。  
关键字：computed

示例：

<div id="myApp">
        今年3月3日发卖的任天堂新一代主机Switch的价格是：{ { price}}日元，含税价格为：{ { priceInTax}}日元，折合人名币为：{ { pricceChinaRMB}}元。
    </div>
    <script>
        var myApp = new Vue({ 
            el: '#myApp',
            data: { 
                price: 29980
            },
            computed: { 
                priceInTax: function () { 
                    return this.price * 1.08;
                },
                pricceChinaRMB: function () { 
                    return Math.round(this.priceInTax / 16.75);
                }
            }
        });
    </script>

![在这里插入图片描述][20191009201225402.png]所有的计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果。

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

注意：计算属性还可以依赖多个Vue实例的数据，只要其中任一数据发生变化，计算属性就会重新执行，视图也会更新。

示例：在购物车内两个包裹的物品总价。

<div id="app">
        总价：{
       { prices }}
    </div>
    <script> var app = new Vue({ el: '#app', data: { package1: [ { name: 'iPhone 11', price: 9000, count: 2 }, { name: 'iPad', price: 2888, count: 1 } ], package2: [ { name: 'apple', price: 3, count: 5 }, { name: 'banana', price: 2, count: 10 } ] }, computed: { prices: function () { var temp = 0; for (var i = 0; i < this.package1.length; i++) { temp += this.package1[i].price * this.package1[i].count; } for (var j = 0; j < this.package2.length; j++) { temp += this.package2[j].price * this.package2[j].count; } return temp; } } }); </script>

![在这里插入图片描述][20191009203734726.png]当package1或package2中的商品有任何变化，比如购买数量变化或增删商品时，计算属性prices就会自动更新，视图中的总价也会随之变化。

每一个计算属性都包含一个getter和setter。上面的示例只是利用getter来读取。在我们需要时提供一个setter函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义操作。

示例：

<div id="app">
        姓名：{
       { fullName }}
    </div>
    <script> var app = new Vue({ el: '#app', data: { firstName: 'Jack', lastName: 'Green' }, computed: { fullName: { //getter:用于读取 get: function () { return this.firstName + ' ' + this.lastName; }, //setter:写入时触发 set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } } }); </script>

![在这里插入图片描述][20191009205720836.png]当执行app.fullName = ‘John Doe’；时，setter就会被调用，数据firstName和lastName都会相对更新，视图同样也会更新。

绝大多数情况下，只会使用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。

计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称class和内联样式style。当使用组件时，计算属性也经常用来动态传递props。

计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据，例如：

<div id="app1"></div>
    <div id="app2">
        {
       {reversedText}}
    </div>
    <script> var app1 = new Vue({ el: '#app1', data: { text: '123,456' } }); var app2 = new Vue({ el: '#app2', computed: { reversedText: function () { //这里依赖的是实例app1的数据text return app1.text.split(',').reverse().join(','); } } }); </script>

这里我们创建了两个Vue实例app1和app2，在app2的计算属性reversedText中，依赖的是app1的数据text，所以当text变化时，实例app2的计算属性也会变化。

[20191009201225402.png]: /images/20210813/04dd62ff079648088fdfc0ffcfb2b9cd.png
[20191009203734726.png]: /images/20210813/20bbf2e478ac4096807d3a3371c61325.png
[20191009205720836.png]: /images/20210813/265c631c758347c1b88d5839e890c55a.png