关键词

Vue computed(计算属性)详解

当 Vue.js 实例对象的对象属性值发生改变的时候,能自动更新并渲染到 View。但是在实际项目中,Vue.js 实例对象中的数据,会依赖其他数据的改变而改变,View 层需要实时感知到底层数据的变化,从而及时渲染到 View 层并显示。

Vue.js 提供了 computed 和 watch 属性,可以满足这样的项目需求。本节先介绍 computed 的特点、使用方法和注意事项。

computed计算属性

模板内的表达式在使用时非常便利,但是设计它们的初衷是进行简单运算。在模板中放入太多的逻辑会让模板负担过重且难以维护。

以下代码比较难理解和维护:
<div id = "example">
    {{ message.split('').reverse().join('')}}
</div>
在这个地方,模板不再是简单的声明式逻辑。开发人员必须看一段时间才能意识到,这里是想显示变量 message 的翻转字符串。当开发人员在模板中的多处包含此翻转字符串时,就会更加难以处理。

对于类似这样的复杂逻辑,开发人员应使用 computed 属性实现,代码如下:
<div id="app">
    <p>基本属性 message: {{ message }}</p>
    <p>计算属性 reversedMessage: {{ reversedMessage }}</p>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        computed: {
            //计算属性的getter
            reversedMessage: function() {
                // 'this' 指向 vm 实例
                return this.message.split('').reverse().join('');
            }
        }
    });
</script>
在上面的代码中声明了一个计算属性 reversedMessage,并且定义了一个函数,将这个计算属性赋给这个函数,相当于 vm.reversedMessage 计算属性的 getter() 函数。可以直接通过这个函数获取计算属性 reversedMessage 的值。

因为 reversedMessage 计算属性的值是基于 message 属性计算出来的,所以也可以通过改变 message 属性的值,然后重新计算,得到 reversedMessage 的新值,代码如下:
console.log(vm.reversedMessage);  // => 'olleH'
vm.message = 'Goodbye';
console.log(vm.reversedMessage);  // => 'eybdooG'
开发人员可以打开浏览器的控制台,自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值,如果单独修改 vm.reversedMessage 的值,控制台会提示计算属性不能设置值,因为没有 setter() 方法。需要说明一下,计算属性默认只有 getter() 方法,而没有 setter() 方法,所以这样直接改变计算属性的值会抛出异常,但是计算属性是可以添加 setter() 方法的。

开发人员可以像绑定普通 property 一样在模板中绑定计算属性。Vue.js 知道 vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新,而且最妙的是开发人员已经以声明的方式创建了这种依赖关系:计算属性的 getter() 方法是没有副作用(Side Effect)的,这使它更易于测试和理解。

computed属性的setter()方法

computed 属性默认只有 getter() 方法,开发人员是无法直接修改计算属性的值的。如果开发人员需要直接修改计算属性的值,则可以给计算属性添加 setter() 方法。同时定义 fullName 计算属性的 getter() 和 setter()方法,代码如下:
<div id="app">
    firstName: <input type="text" v-model="firstName"><br/>
    lastName: <input type="text" v-model="lastName"><br/>
    fullName: <input type="text" v-model="fullName"><br/>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        computed: {
            fullName: {
                get: function() {
                    return this.firstName + ' ' + this.lastName;
                },
                set: function(newValue) {
                    let names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    });
</script>
这样就可以在控制台直接给 fullName 计算属性赋予新的值了,如 vm.fullName='zhao liu'。

computed属性同方法的对比

在 Vue.js 中,可以将计算属性绑定到 View 中进行渲染显示,同样可以将一个 Vue.js 实例对象的方法,绑定到 View 中显示方法返回的结果,在页面上都会显示,代码如下:
<div id="app">
    <div>
        <p>计算属性:<br/>
            {{ computedNow }}<br/>
        </p>
        <p>方法:<br/>
            {{ methodNow() }}<br/>
        </p>
    </div>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        methods: {
            methodNow: function() {
                console.log("调用了 methodNow 方法");
                return Date.now();
            }
        },
        computed: {
            computedNow: function() {
                console.log("执行了 computedNow 计算属性");
                return Date.now();
            }
        }
    });
</script>
但是如果在 View 中同时绑定多次计算属性和方法,则虽然它们的显示效果一样,但是查看控制台时会发现计算属性函数中的打印语句只执行了一次,而函数中的打印语句执行了多次(每绑定一次就执行一次),代码如下:
<div id="app">
    <div>
        <p>计算属性:<br/>
            {{ computedNow }}<br/>
            {{ computedNow }}<br/>
            {{ computedNow }}<br/>
        </p>
        <p>方法:<br/>
            {{ methodNow() }}<br/>
            {{ methodNow() }}<br/>
            {{ methodNow() }}<br/>
        </p>
    </div>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        methods: {
            methodNow: function() {
                console.log("调用了 methodNow 方法");
                return Date.now();
            }
        },
        computed: {
            computedNow: function() {
                console.log("执行了 computedNow 计算属性");
                return Date.now();
            }
        }
    });
</script>
其原因是 computed 属性是基于它们的响应式依赖进行缓存的。也就是说,计算属性会将它们计算的值保存在缓存,只有当它们依赖的响应式数据发生改变后,计算属性才会重新计算,否则就直接从缓存中获取值进行渲染,而方法不一样,每次调用都执行一次。

computed 属性适合于计算时性能开销比较大的数据,这样就避免每次渲染的时候都要重新计算,浪费资源。如果开发人员不希望使用缓存,则可改成使用方法。

本文链接:http://task.lmcjl.com/news/17198.html

展开阅读全文