只要在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个字段听起来像代码气味，而且代码可能需要重构。

除此之外，vue允许您使用data object观看整个$data并明确将其设置为deep

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

请参阅此工作fiddle和此watch documentation摘录

  

选项：深

     

要检测对象内的嵌套值更改，您需要传递   in deep：在options参数中为true。请注意，您不需要这样做   所以要听Array变异。

警告

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