vue.js-watch-简写-语法

最新推荐文章于 2025-06-14 18:55:27 发布

原创

最新推荐文章于 2025-06-14 18:55:27 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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>

在这个例子中