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属性的监听函数中第一个参数是新的属性值,第二个参数是旧的属性值。

相关推荐
DoraBigHead10 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu10 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡15 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞17 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu20 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu20 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu21 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge23 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu23 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi28 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端