watch属性的使用

侦听属性的出现，可以实现在数据发生变化时，处理一些逻辑。比如数据的联动更新。现在我们通过代码的方式来表达：

[loginview]

<template>
    <div>
        <p>{{a}}</p>
        <p>{{b}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 'aaaa',
                b:''
            }
        },
        watch:{
            a(newval,oldval){
                console.log(oldval)
                console.log(newval)
                this.b = newval
            }
        },
        mounted() {
            this.a = 'new data'
        }
    }
</script>

我们默认初始化2个变量，监听a发生变化时，把b也赋值为a的值。我们发现watch的写法大体上和计算属性是一致的。watch可以有参数，第一个是新的值，第二个是旧的值，如果你用不到的话，可以不写参数。

运行结果：

都输出了新的值。

计算属性和侦听属性联合使用

我们发现watch的写法在名称上就是变量的名称(计算属性的名称可以自己定义)。如果我们要监听vuex的变量呢，那该如何写了呢？有时候我们只要监听对象里面的某个值变化，又该怎么写了呢。其实也不难，利用计算属性把变量翻译下即可。为了演示这个过程，代码：

<template>
    <div>
        <p>{{a}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                person: {
                    age: 10,
                    name: '张珊'
                },
                a: 0
            }
        },
        computed: {
            myAge() {
                return this.person.age
            }
        },
        watch: {
            myAge(nval, oval) {
                this.a = nval
            }
        },
        mounted() {
            this.person.age = 30
        }
    }
</script>

我们通过改变person.age来触发a变量的值也跟着变化。我们并没有直接对a变量进行赋值。而是通过watch来实现的。

页面输出：

[/loginview]