前端小白入门Vue之计算属性

前言

首先了解为什么要引入计算属性
举例：

    <div id="app">
        <div>户籍：{{province + city}}</div>
        <div>居住地：{{province + city}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                province: "xx省",
                city: "xx市"
            }
        })
    </script>

从代码中我们可以看到，每次都需要调用去计算province+city值，非常降低效率，对于这种重复调用的计算，我们可以采用Vue为我们提供的计算属性，从而无需重复计算，将计算之后的值保存起来。

---

一、计算属性的语法

引入computed，定义一个计算函数region：

    <div id="app">
        <!-- 示例1 -->
        <div>户籍：{{province + city}}</div>
        <div>居住地：{{province + city}}</div>
        <h3>计算属性：</h3>
        <!-- 示例2 -->
        <div>户籍：{{region}}</div>
        <div>居住地：{{region}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                province: "xy省",
                city: "xx市"
            },
            computed: {

                region: {
                    get: function () {
                        return this.province + this.city
                    }
                }
            }
        })
    </script>

这样调用时就不用重复计算，从而提高效率。

二、数据变动

可能有同学会想到如果计算的值发生变化，那计算属性还会有作用吗？
计算属性会自动检测数据是否更新，如果存在更新，就重新进行计算保存。

1.计算属性之get

计算属性中的默认方法，数据更新后，get方法会自动获取新值

    <div id="app">
        <div>户籍：{{region}}</div>
        <div>居住地：{{region}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                province: "xy省",
                city: "xx市"
            },
            computed: {
                region: {
                    get: function () {
                        return this.province + this.city
                    },
                }
            }
        })
    </script>

2.计算属性之set

通过set方法，设置（value）值，来改变region所相广联的值，从而使其更新。

    <div id="app">
        <div>户籍：{{region}}</div>
        <div>居住地：{{region}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                province: "xy省",
                city: "xx市"
            },
            computed: {
                region: {
                    get: function () {
                        return this.province + this.city
                    },
                    set: function (value) {
                        var arr = value.split(" ");
                        this.province = arr[0];
                        this.city = arr[1];
                    }
                }
            }
        })
    </script>

我们到控制台进行属性值的改变

从而也就达到数据的更新

set方法大家可以实践进行理解。

三、数据监听

计算属性能自动获取数据是否更新，它为什么知道数据更新了呢？下一篇，介绍Vue的侦听器，学习侦听数据是否更新。

总结

1.计算属性可以有效提高页面效率，使其计算的值，进行一次保存，不用每次都进行计算过。
2.我们可以采用set方法对数据进行更改更新。
3.get方法用于获取更新后的数据。

今日推荐

免费PPT模板网站：优品PPT