vue中watch属性的用法

在Vue中,watch属性用于监听一个数据的变化,并且在数据变化时执行一些操作。它可以观察一个具体的数据对象,从而在该数据对象发生变化时触发对应的回调函数。

使用watch属性的步骤如下:

  1. 在Vue实例中添加一个watch对象

    new Vue({
    data: {
    message: 'Hello Vue!'
    },
    watch: {
    message: function (newVal, oldVal) {
    console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
    }
    })

  2. 在watch对象中添加一个或者多个属性监听函数

    watch: {
    message: function (newVal, oldVal) {
    console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    // 添加多个监听函数
    age: [
    function (newVal, oldVal) {
    console.log('age changed from ' + oldVal + ' to ' + newVal)
    },
    function (newVal, oldVal) {
    console.log('age changed again from ' + oldVal + ' to ' + newVal)
    }
    ]
    }

在这个例子中,我们监听了message和age两个属性,在这些属性的值发生变化时,我们会执行对应的监听函数,输出当前属性的新旧值。

需要注意的是,watch属性的监听函数中第一个参数是新的属性值,第二个参数是旧的属性值。

相关推荐
楼田莉子1 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝1 小时前
Vue总结
前端·javascript·vue.js
木易 士心2 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER2 小时前
Web 开发 21
前端·学习
又是忙碌的一天2 小时前
前端学习day01
前端·学习·html
Joker Zxc2 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel2 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld2 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端
不会算法的小灰3 小时前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
zero13_小葵司3 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js