3、计算属性

---

title: 3、计算属性
date: 2017-07-27 10:19:21
tags: vue笔记(妙味)

---

之前说过，模板内在插值中写表达式很方便，但是如果放太多逻辑会让模板过重难以维护。所以在模板内只适合简单的运算，稍微复杂的语句就需要计算属性了。

computed和methods

计算属性应该放到computed属性中，函数放到methods中，而实际上计算属性的语句也是写到函数里，所以其实写到methods也是可以的，但两者还是有区别的。

<div id="app">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Methods reversed message: "{{ reversedMessage1() }}"</p>
</div>

var vm = new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
    computed:{
        reversedMessage: function(){
            return this.message.split('').reverse().join('')
        }
    },
    methods:{
        reversedMessage1: function(){
            return this.message.split('').reverse().join('')
        }
    }
})

对于最终的结果，methods和computed是相同的，

不同的是computed是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值，这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数(假如函数里有获取当前时间的语句也不会执行)。

相比而言，只要发生重新渲染，methods调用总会执行该函数。

所以假如有一个性能开销比较大的计算属性A，而且可能别的计算属性还依赖于A的返回值，那么有缓存可以节省性能。但是不需要缓存时可以用methods代替。

watch

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动，就是watch属性。

但是当有一些数据需要随着其他数据变动而变动时，很容易滥用watch，通常更好的方法是使用computed属性而不是命令式的watch。

<div id="app1">
    {{ fullName }}
</div>

<div id="app2">
    {{ fullName }}
</div>

watch的方式，只要data中的数据发生变化，watch就会监测到，并执行相对应的方法。

var app1 = new Vue({
    el:'#app1',
    data:{
        firstName:'Foo',
        lastName:'Bar',
        fullName:'Foo Bar'
    },
    watch:{
        firstName: function(val){
            this.fullName = val + ' ' + this.lastName;
        },
        lastName:function(val){
            this.fullName = this.firstName + ' ' + val;
        }
    }
})
app1.firstName = 'tim';

computed的方式，这里就是上面说的，fullName会随着firstName和lastName的改变而改变。很明显在这里使用computed的方法更简洁。

var app2 = new Vue({
    el:'#app2',
    data:{
        firstName:'Foo',
        lastName:'Bar'
    },
    computed:{
        fullName: function(){
            return this.firstName + ' ' + this.lastName;
        }
    }
})
app2.firstName = 'tom';

get和set

computed中不仅有get，还有set方法。

之前介绍的都是get方法，也就是data中的数据作为参数，通过函数内部计算，返回一个新的数据。而set方法是将计算后得新数据的值作为参数，改变原本data中的数据。

<div id="app1">
    {{ fullName }}
</div>

var app1 = new Vue({
    el:'#app1',
    data:{
        firstName:'Foo',
        lastName:'Bar'
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ' ' + this.lastName;
            },
            // 这里会将fullName的值最为参数传进来。
            set:function(newValue){
                var name = newValue.split(' ');
                this.firstName = name[0];
                this.lastName = name[name.length - 1];
            }
        }
    }
})

// 这里更改fullName的值会调用set()，然后会改变firstName和lastName的值。在通过get展示在html中
app1.fullName = 'john Doe';

在使用Vue的时候，get会在改变data的数据时被调用，而set会在改变computed中新数据的返回值的时候被调用。