vue计算属性和监听属性

计算属性computed

计算属性在处理一些复杂逻辑时是很有用的。我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。
computed 中双向数据绑定函数一定要有get()、set()

<template>
    <div id="home">
        <p>{{num}}</p>
        <p>double {{double1}}</p>
        <input type="text" v-model="double2">
    </div>
</template>
<script>
    export default {
        name: "Home",
        data() {
            return {
                num: 20
            }
        },
        computed: {
            double1: function () {
                return this.num * 2;
            },
            double2: {
                get: function () {
                    return this.num * 2;
                },
                set: function (val) {
                    this.num = val / 2;
                }
            }
        }
    }
</script>

监听属性 watch

我们可以通过 watch 来响应数据的变化。

<template>
    <button @click = "counter++">点我</button>
</template>
<script>
    data() {
        return {
            counter: 0,
        }
    },
    watch:{
        counter:function(nval,oval) {
            alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
        },
    }
</script>

watch 默认是浅监听。（只监听表层的变化。）
对于引用类型（对象数组）的浅监听：只能监听自身一层，他的子层及以下改变监听不到。所以用深度监听。watch 如何是深度监听？

data() {
    return {
        msg: "这是首页",
        counter: 0,
        info:{
            city:"beijing"
        }
    }
},
watch: {
    //值类型，可正常拿到oldVal 和 newVal
    counter: function (newVal, oldVal) {
        alert('计数器值的变化 :' + oldVal + ' 变为 ' + newVal + '!');
    },
    //引用类型，拿不到oldVal，因为指针相同，指向同一个堆的地址。此时已经指向了新的val
    info: {
        handler(oval, nval) {
            console.log("watch info", oval, nval);
        },
        deep: true //深度监听
    }
}

watch 监听引用类型，拿不到oldVal
因为指针相同，新值旧值指向同一个堆的地址。此时已经指向了新的val。