vue.js-watch-简写-语法

Vue.js的watch是一个可以监测Vue实例中数据变化的功能。当Vue实例中的数据发生变化时，watch可以执行相应的回调函数。

watch的语法有两种写法：简写和完整写法。下面分别对这两种写法进行详细解析。

简写语法：

watch: {
    dataName(newValue, oldValue) {
        // 在dataName数据变化时执行的回调函数
    }
}

在这个简写语法中，我们可以直接使用data中已定义的属性名来进行监测。当data中的数据发生变化时，watch会自动执行相应的回调函数。在回调函数中，我们可以访问到新的值newValue和旧的值oldValue。

代码实例：

<template>
    <div>
        <p>当前值：{{ message }}</p>
        <button @click="changeValue">改变值</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello Vue.js'
        }
    },
    watch: {
        message(newValue, oldValue) {
            console.log('新的值为：', newValue)
            console.log('旧的值为：', oldValue)
        }
    },
    methods: {
        changeValue() {
            this.message = 'Hello World'
        }
    }
}
</script>

在这个例子中，我们有一个按钮，点击按钮会将message的值改变为'Hello World'。watch会监测到message的变化，并执行相应的回调函数。

简写语法的watch适用于只监测一个变量的情况，当需要监测多个变量时，可以使用完整写法。

完整写法：

watch: {
    dataName: {
        handler(newValue, oldValue) {
            // 在dataName数据变化时执行的回调函数
        },
        deep: true,
        immediate: true
    }
}

在完整写法中，我们可以使用一个对象来定义要监测的变量和对应的回调函数。在handler属性中，我们可以定义回调函数。在deep属性中，我们可以设置是否监测对象中的每个属性的变化。在immediate属性中，我们可以设置在Vue实例创建时是否立即执行回调函数。

代码实例：

<template>
    <div>
        <p>当前值：{{ obj.value }}</p>
        <button @click="changeValue">改变值</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj: {
                value: 'Hello Vue.js'
            }
        }
    },
    watch: {
        obj: {
            handler(newValue, oldValue) {
                console.log('新的值为：', newValue)
                console.log('旧的值为：', oldValue)
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        changeValue() {
            this.obj.value = 'Hello World'
        }
    }
}
</script>

在这个例子中，我们有一个对象obj，其中有一个属性value。点击按钮会将obj.value的值改变为'Hello World'。watch会监测到obj.value的变化，并执行相应的回调函数。