如何在Vue 2中查看数据对象中的所有键

您可以使用来自vue deep的观察者提供的选项.如文档中所述:

要检测对象内的嵌套值更改,还需要在options参数中传入deep:true.请注意,您不需要这样做来侦听Array突变.

您的代码如下所示:

watch: {
    'selected': {
        handler: function (val, oldVal) {
            console.log('watch 1', 'newval: ', val, '   oldVal:', oldVal)
        },
        deep: true
    }
}

我认为您可以这样做：

watch: {
    $data: {
        handler: function(val, oldVal) {
            console.log(val)
        },
        deep: true
    }
},

watch: {
  'selected.type': function (newSelectedType) {
    console.log(newSelectedType)
  },

  'selected.instrument': function (newSelectedinstrument) {
    console.log(newSelectedinstrument)
  }
}

如果您只是尝试计算新数据selected,则可以使用计算属性,因为Vue的数据是被动的,计算属性也可以检测数据的变化.

如果你想使用一个单一的功能观看整个对象,你可以用$watch与deep: true:

mounted () {
  this.$watch('$data.selected', this.onSelectedUpdate, { deep: true })
}

请注意,这'$data.selected'是一个字符串,Vue将解析它.

在你的方法中:

onSelectedUpdate (newSelected) {
  console.log(newSelected)
}