Vue系列(八)之计算属性和侦听器

模板内的表达式非常便利，但不适合复杂的逻辑，所以就有了计算属性。

计算属性

计算属性写在computed选项中。

举一个简单的例子🌰：data中有firstName,lastName，都是响应式的，页面上显示全名（firstName + lastName）。

<div id="app">
    <input v-model="firstname">
    <input v-model="lastname">
    <div>{{fullname}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: 'tom',
            lastname: 'smith'
        },
        computed: {
            fullname() {
                return this.firstname + ' ' + this.lastname
            }
        }
    });
</script>

定义了一个计算属性fullname，计算属性也是响应式的，它的改变依赖于firstname和lastname的改变。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。参考计算属性和方法的区别

侦听器

计算属性能满足大多数情况，但也有计算属性无法做到的。比如当需要在数据变化时执行异步或开销较大的操作时，使用侦听器是最合适的，侦听器写在watch选项中。

watch用来监听指定数据的改变，指令数据发生了改变，就会触发watch回调函数。

<div id="app">
    <div>{{name}}</div>
    <button @click="change">change</button>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'ayy'
        },
        watch:{
            name(newVal,oldVal){
                setTimeout(function () {
                    alert('新值：' + newVal + '旧值：' + oldVal);
                },1000);
            }
        },
        methods:{
            change(){
                this.name = '666'
            }
        }
    });
</script>

这里watch了name的改变，当点击按钮name改变后会触发watch中的name函数，回调函数中能拿到改变前后的两个值。