计算属性和监听器 (VUE)

计算属性和监听器

计算属性

首先咱们知道，模版内的表达式很是便利，可是设计他们的初衷时因为简单运算的，在模版中国放入太多的逻辑会这个模版难以维护。所以计算属性应运而生。

若是不适用计算属性带来的复杂程度能够看下面的例子
```html

对于复杂的逻辑而言，咱们更多的应该使用计算属性

下面咱们来看一个基础的例子

<div id="app">
    <p>{{ msg }}</p>
    <!-- 及其复杂的逻辑表达式很是不容易去维护 -->
    <p>{{ msg.split('').reverse().join('') }}</p>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    }
})

当咱们使用计算属性的时候，看看效果的方便

<div id="app">
        <p>{{ msg }}</p>
        <p>{{ msg.split('').reverse().join('') }}</p>
        <p>{{ reveredMessage }}</p>
    </div>

js

const vm = new Vue({
    el: '#app',
        data: {
            msg: 'hello',
        },
        computed: {
            // 计算属性的getter 
            reveredMessage: function () {
                // this 指向时vm的实例
                return this.msg.split('').reverse().join('')
                }
            }
     })

计算属性缓存vs方法

固然咱们能够注意到，咱们能够在表达式中调用方法来达到一样的效果。

如同下面这个使用方法的例子

<!-- 这个方法直接调用来methods中的方法 -->
<p> 调用methods中的方法 {{ changeMsg() }} </p>

js部分

// 直接简写
methods: {
    changeMsg() {
        return this.msg.split('').reverse().join('')
    }
}

咱们能够将同一个函数定义一个方法而不是一个计算属性。两种方式的最终结果确实彻底相同的，然而，不一样的计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时，他们才会从新求值。这就意味这只要msg还没发生改变，屡次访问reveredMessage计算属性会当即返回以前的计算结果，而没必要再次执行函数。

这样也一样的意味这下面的计算属性将再也不更新，由于 Date.now()不是响应式依赖：

computed: {
    now: function () {
        return Date.now()
    }
}

相比之下，每当触发从新渲染时，调用方法总会再次执行函数

思考 咱们为何使用computed计算属性，在我看来，简单来讲，计算属性能够缓存。

为们为何须要缓存？假如咱们有一个性能开销比较大的计算属性getCount, 它须要遍历一个巨大的数组并做出大量的计算。而后咱们有可能有其余的计算属性依赖于getCount,若是没有缓存，咱们将不可避免的屡次去执行getCount的getter！。。。。固然了，若是你不但愿有缓存，换一句话来讲，你可使用方法来代替。

计算属性vs侦听属性

Vue提供了一种更为通用的方式来观察和响应Vue实列上的数据变化：侦听属性。固然你有一些数据须要随着其余数据的变化而变更时你很容易滥用wathch，--。
然而呢，咱们最好的作法时使用计算属性而不是命令式的watch回调。

下面咱们能够想一想这个例子

<p> {{ fullName }} </p>

主要看js代码

cosnt vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        fullName: '',
    },
    watch: {
        firstName: function (newVal, oldVal) {
            this.fullName = newVal + this.lastVal
        },
        lastName: function (newVal, oldVal) {
            this.fullName = this.firstName + newVal
        }
    }
})

使用watch的话每次就只能监听到一个属性。并且命令是重复的，将它和计算属性进行对比。

<p> {{ fullName }} </p>

看js代码

cosnt vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        // fullName: '',
    },
    computed: {
        fullName: {
            // 只须要执行一次就OK
            return this.firstName + this.lastName
        }
    }   
})

侦听器

虽然计算属性在大多数状况下更加适合，但有时候也须要一个自定义的侦听器。这就是为何Vue经过watch选项提供了一个更加通用的方法，来响应数据的变化。当须要在数据变化时执行异步或者开销较大的操做时，这个方法时最有用的。

总结 以上这个例子，使用的watch选项中容许咱们执行异步操做（访问一个API），限制咱们执行该操做的频率，并在咱们最终结果前，设置中间状态／。这些计算属性是没法作到的。

固然咱们除了有watch以外，咱们还可使用vm.$watch 这个API。