繁体   English   中英

每当在 Vue.js 中更改任何变量时触发监视函数

[英]Trigger a watch function whenever any variable is changed in Vue.js

有没有一种方法可以在应用程序中的变量发生变化时触发 Vue.js 函数?

var vm = new Vue({
  el: '#demo',
  data: {
    variable1: 'Foo',
    variable2: 'Bar',
    .....
    .....
    variablen: 'Foo Bar'
  },
  watch: {
    <<any variable>>: function(){
      console.log('any of these variables changed');
    }
  }
})

首先,我同意所有评论,即 50 个字段听起来像是代码异味,并且可能需要重构代码。

除此之外,vue 允许您使用$data watch 监视整个data object并将其显式设置为deep

  watch: {
    '$data': {
      handler: function(newValue) {
        console.log('Current vaules:' + newValue.FirstName + ' ' + newValue.LastName);
      },
      deep: true
    }
  }

请参阅此工作小提琴和此手表文档摘录

选项:深

要同时检测对象内部的嵌套值更改,您需要在选项参数中传递 deep: true 。 请注意,您不需要这样做来侦听 Array 突变。

警告

正如@BelminBedak 所说,此示例仅说明可以存档,但不建议将其用于生产环境。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM