每当 Vue.js 中的任何变量发生更改时都会触发监视函数

Question

有没有一种方法可以在应用程序中的变量发生更改时触发 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');
    }
  }
})

Answer 1

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

\n

除此之外，vue 允许您data object使用$datawatch 来监视整个过程，并将其显式设置为deep

\n

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

\n

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

\n

\n

选项：深

\n

为了还检测对象内部的嵌套值更改，您需要在 options 参数中传递\nin deep: true 。请注意，您不需要\xe2\x80\x99\n来侦听数组突变。

\n

\n

警告

\n

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

\n