监听器 – watch

watch

使用watch来侦听data中数据的变化，watch中的属性（watch是对象格式）一定是data 中已经存在的数据。

使用场景：

数据变化时执行异步或开销比较大的操作。

声明监听器，使用的关键词是watch

每个监听器的方法，可以接受2个参数，第一个参数是新的值，第二个参数是之前的值

<div id="app">
    <p><input type="text" v-model='firstName' placeholder="姓" /></p>
    <p><input type="text" v-model='lastName' placeholder="名" /></p>
    <p><input type="text" v-model='fullName' placeholder="全名" /></p>
</div>

<script src="./js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
            fullName: ''
        },
        watch: {
            firstName: function(newval,oldval) {
                this.fullName = newval + ' ' + this.lastName
            },
            lastName: function(newval,oldval) {
                this.fullName = this.firstName + ' ' + newval
            }
        }
    })
</script>

深度监听

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。

<div id="app">
    <p><input type="text" v-model='userinfo.firstName' placeholder="姓" /></p>
    <p><input type="text" v-model='userinfo.lastName' placeholder="名" /></p>
    <p><input type="text" v-model='userinfo.fullName' placeholder="全名" /></p>
</div>

<script src="./js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            userinfo: {
                firstName: '',
                lastName: '',
                fullName: ''
            }
        },
        watch: {
            userinfo: {
                // handler是固定的写法
                handler(val) {
                    this.userinfo.fullName = val.firstName + ' ' + val.lastName
                    // 对象支持引用传值
                    val.fullName = val.firstName + ' ' + val.lastName
                },
                deep: true
            }
        }
    })
</script>