vue中的计算属性和侦听器

计算属性

在模板中使用绑定表达式，如果表达式的逻辑过于复杂，则模板会变得臃肿。所以Vue引入了计算属性的概念，在Vue实例中通过对computed属性进行定义，通过定义函数的形式定义计算函数。看下列具体案例：

    <div id="app">
        {{ message }}</br>
        {{ re }}</br>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "计算属性"
            },
            computed: {
                re: function(s) {
                    return "这个案例用来讲," + this.message;
                }
            }
        })
    </script>

在上述案例中，我们在Vue实例中定义了一个变量message，然后通过计算属性返回一个对message处理后的新字符串。当message的值随之改变时，
vm.re所返回的值也会随之更新

在计算属性中默认只有getter，因此是不能直接修改计算属性的，也可以通过setter进行修改

    <div id="app">
        {{ message }}</br>
        {{ re }}</br>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "计算属性"
            },
            computed: {
                re: {
                    get: function() {
                        return "这个案例用来讲，" + this.message;
                    },
                    set: function(newValue) {
                        this.message = newValue;
                    }
                }
            }
        })
    </script>

计算属性缓存

复杂的表达式也可以放到方法中去实现，然后再调用方法。这两种方式都可以得到相同结果。但是他们存在一定区别，计算属性只有当所使用的值发生改变的时候才会重新求值，而方法是调用一次执行一次

 <div id="app">
        {{ message }}</br>
        {{ re }}</br>
        {{ re2() }}</br>
        {{ re }}</br>
        {{ re2() }}</br>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "计算属性"
            },
            computed: {
                re: function() {
                    console.log("这个是computed");
                    return "这个是通过computed 显示" + this.message;
                }
            },
            methods: {
                re2: function() {
                    console.log("这个是method中声明的方法");
                    return "这个是通过method中声明的方法" + this.message;
                }
            }
        })
    </script>

在上述中我们调用了两次re和两次re2，而实际上却只执行了一次re，这就是方法和计算属性的区别

侦听器

侦听器是一种通用的观察和响应数据变动的方式，监听器是通过watch选项进行定义

    <div id="app">
        年龄：<input type="text" name="" v-model="age" id="">
        <p v-if="info">{{ info}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                age: 0,
                info: ""
            },
            watch: {
                age: function(val) {
                    if (val < 18) {
                        this.info = "未成年"
                    } else if (val > 100) {
                        this.info = "年龄太大"
                    } else {
                        this.info = "已成年"
                    }
                }
            }
        })
    </script>

在实例中，watch属性中监听了data中age，当age修改的时候，data也会随之修改

监听器的深度监听

监听器还可以监听一个对象的属性变化，除了上述监听器的写法，还有可以直接写一个函数。

  <div id="app">
        年龄：<input type="text" name="" v-model="person.age" id="" value="person.age">
        <p v-if="info">{{ info }}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                person: {
                    age: 25
                },
                info: ""
            },
            methods: {
                checkage() {
                    if (this.person.age < 18) {
                        this.info = "未成年"
                    } else if (this.person.age > 100) {
                        this.info = "年龄太大"
                    } else {
                        this.info = "已成年"
                    }
                }
            },
            watch: {
                person: {
                    handler: 'checkage',
                    deep: true,
                    immediate: true
                }
            }
        })
    </script>

上述实例监听的是对一个对象进行深度监听，其中handler是用于定义当数据变化时调用监听器函数，deep是表示无论要监听的对象在层级中有多深都进行监听，immediate表示监听函数或方法在监听开始后立即执行。