计算属性 | iGmaBlog

定义

需要使用的属性不存在(不在 data 里)，可以通过已有的属性计算得来，这样的属性称为计算属性。

原理

底层借助了 Object.defineproperty 方法提供的 getter 和 setter 。

get 函数什么时候执行？

初次读取计算属性时被执行。
当依赖的数据发生改变时会被再次调用。
例如：计算属性 ab 是通过通过属性 a 和属性 b 做运算得到的。那么在第一次读取 ab 时，get 会被调用。当 a 或 b 的值发生变化时，get 会被调用。

优势

与 methods 实现相比，内部有缓存机制，可复用，效率高。
缓存机制：拿上面的例子，当 a 和 b 都不发生变化时，页面上第一次读取 ab 的值时，get 会被调用，第二次调用 ab 值时，get 不在被调用，而是从缓存中读取 ab 的值

备注

计算属性最终出现在 vm 上，直接读取使用即可。
如果计算属性要被修改，那必须写 set 函数去响应修改。

代码演示

需求，计算两个输入框内的值的和。

代码

html

<body>
    <div id="root">
        <div>
            <span>第一个数：</span>
            <input type="text" v-model="a">
        </div>
        <div>
            <span>第二个数：</span>
            <input type="text" v-model="b">
        </div>
        <h3>计算结果：{{ ab }}</h3>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                a: 10,
                b: 20
            },
            computed: {
                ab: {
                    get() {
                        let { a, b } = this;
                        return Number(a) + Number(b);
                    }
                }
            }
        })
    </script>
</body>

运行结果

计算属性的精简写法

当计算属性只用来调用，而不对其进行修改时，可以简化为下面的代码

html

<body>
    <div id="root">
        <div>
            <span>第一个数：</span>
            <input type="text" v-model="a">
        </div>
        <div>
            <span>第二个数：</span>
            <input type="text" v-model="b">
        </div>
        <h3>计算结果：{{ ab }}</h3>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                a: 10,
                b: 20
            },
            computed: {
                ab() {
                    let { a, b } = this;
                    return Number(a) + Number(b);
                }
            }
        })
    </script>
</body>

直接把计算属性的属性名作为函数名，这样等同于 get 函数。返回值作为计算属性 ab 的值。

定义 ​

原理 ​

get 函数什么时候执行？ ​

优势 ​

备注 ​

代码演示 ​

计算属性的精简写法 ​

定义

原理

get 函数什么时候执行？

优势

备注

代码演示

计算属性的精简写法