vue基础篇-计算属性（第三章 ）

计算属性
一、methods vs computed
computed： 是计算属性，实时响应的，比如你要根据data里一个值随时变化做出一些处理，就用computed。
Methods：是方法，比如你点击事件要执行一个方法，这时候就用methods。

相同：两者达到的效果是同样的。
不同：计算属性是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

 <p>Reversed message: "{{ reversedMessage() }}"</p>

computed：

 var vm = new Vue({
    el: '#example',
    data: {
    message: 'Hello'
    },
    computed: {
    // a computed getter
    reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
    }
    }
    })

methods：

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

将同一函数定义为一个 method 或者一个计算属性（computed）。对于最终的结果，两种方式确实是相同的
不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。

总结：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods

二、computed VS watched
共同点：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
不同： watch和computed各自处理的数据关系场景不同
(1).watch擅长处理的场景：一个数据影响多个数据
(2).computed擅长处理的场景：一个数据受多个数据影响

var vm = new Vue({
el: '#demo',
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
}
}
})

上面代码是命令式的和重复的，computed属性：代码更简单。

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

总结：尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。

三、注意computed的属性调用
computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不是

例子：

 <!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '现在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '现在我用的是computed'
        }
    }
})

computed的属性调用：在HTML的插值里
computed定义的方法我们是以属性访问的形式调用的，{{computedTest}}
methods定义的方法，我们必须要加上()来调用，如{{methodTest()}}，否则，视图会出现test1的情况，见下图