Vue 学习笔记3 —— 计算属性与侦听器

1. 计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当出现复杂逻辑时，可以使用计算属性（属性的值由其他属性计算得到，其他属性变化时计算属性值重新计算，否则使用缓存值）

# 举例

<div id="test">
    <p>{{str}}</p>
    <p>{{reversedStr}}</p>
</div>

let vm = new Vue({
    el: "#test",
    data: {
        str: "touch me"
    },
    computed: {
        reversedStr: function() {
            return this.str.split('').reverse().join('');
        }
    }
})

计算属性做为函数表达式放在 Vue 的 conputed 属性当中。

计算属性的值始终取决于原来的属性值：

vm.str = "hello";
console.log(vm.reversedStr);    // olleh

计算属性基于响应式依赖进行缓存，而方法调用每次调用时都会重新执行函数！

---

# 计算属性的 setter

计算属性默认只有 getter 函数，有需要时可以自定义 setter：

fullName: {
    // getter
    get: function() {
        return this.firstName + ' ' + this.lastName;
    },
    // setter
    set: function(value) {
        [this.firstName, this.lastName] = value.split(" ");
    }
}

---

2. 侦听器

当数据变化时要执行较多操作，可以使用 watch：

new Vue({
    el: "#root",
    data: {
        name: '',
        count: 0
    },
    watch: {
        // 当 name 变化时，count++
        name: function() {
            this.count++;
        }
    }
})