vue为什么监听不到对象

Vue监听对象的原理是通过Object.defineProperty()方法来实现的。但是，Vue只能监听已经存在的属性。如果对象本身就是一个空对象，即没有任何属性，那么Vue是无法监听到的。解决这个问题的方法有两种：

方法一：在对象初始化的时候添加一个空的属性

data() {
  return {
    obj: {}
  }
}

这样，Vue在初始化时就能监听到obj这个对象，并能监听到后续添加的属性。

方法二：使用Vue.set()方法或者this.$set()方法来添加属性

this.$set(obj, 'propertyName', propertyValue)

这样，Vue会自动监听到新添加的属性。

需要注意的是，使用Vue.set()方法或者this.$set()方法添加属性的对象必须是已经被Vue实例所代理的对象，否则Vue是无法监听到新添加的属性的。

总结一下，Vue监听对象需要遵循以下两个原则：

1. 对象本身必须存在属性，可以通过初始化时添加一个空属性或者使用Vue.set()方法或者this.$set()方法来添加新属性。
2. 监听的对象必须是已经被Vue实例所代理的对象。

以上是Vue监听对象不能正常工作的两个常见情况和解决方法，希望对你有所帮助。

Vue无法直接监听到对象的改变是因为Vue使用了对象劫持的方式来实现数据响应式。这种方式是通过劫持对象的访问器属性来实现的，从而在属性被访问或改变时能够触发相应的更新操作。

具体来说，当数据对象被 Vue 实例的 data 选项所代理时，Vue 将会利用 Object.defineProperty() 方法来劫持对象的属性。这个方法会拦截对对象属性的 get 和 set 操作，并且会在属性值改变时通知 Vue 进行相应的更新。

然而，由于 JavaScript 语言的限制，Vue 无法直接监听到对象的新增或删除属性的操作。这是因为 Object.defineProperty() 方法只能劫持已经存在的属性，而无法劫持新增的属性。这就导致当我们直接给对象添加一个新的属性时，Vue 并不能触发相应的更新操作。

另外，Vue 在初始化时会对数据进行深度遍历，将对象的每个属性都转换成 getter 和 setter，但是对于嵌套对象或数组，只会对其第一层属性进行处理，而不会对其子属性进行递归处理。这也意味着当我们修改对象的子属性时，Vue 并不能触发更新。

为了解决这个问题，Vue 提供了 $set 方法来手动添加新的属性，以触发更新操作。$set 方法接受三个参数：对象，属性名，属性值。通过调用 $set 方法，我们可以将新的属性添加到对象中，并触发相应的更新操作。

另外，Vue 3.0 中引入了 Proxy 对象来替代 Object.defineProperty() 方法，从而解决了对象监听的一些限制。Proxy 对象可以劫持整个对象或者数组，可以监听对象新增、删除和修改属性的操作，并且可以对整个对象进行深度监听。这样，在 Vue 3.0 中，我们就能更方便地监听对象的改变。

总结起来，Vue无法直接监听到对象的改变是因为 JavaScript 语言的限制以及 Vue 实现数据响应式的方式所导致的。为了解决这个问题，我们可以使用 $set 方法手动添加属性，或者在 Vue 3.0 中使用 Proxy 对象来监听对象的改变。

在Vue中，通过使用$watch或者watch选项来监听对象的变化是不行的。这是因为Vue在实现响应式的过程中，只能捕获到对象的属性的变化，而无法捕获到对象本身的变化。但是，在某些情况下，我们可能需要监听整个对象的变化，而不仅仅是其中的属性。

为了解决这个问题，Vue提供了一个解决方案，即通过使用Vue.set或者vm.$set方法来向响应式对象添加新的属性，以便能够监听到对象的变化。

具体操作流程如下：

步骤一：创建响应式对象
在Vue实例或者组件的数据选项中，定义一个响应式对象，例如：

data() {
  return {
    obj: {}
  }
}

步骤二：使用Vue.set或者vm.$set方法来添加属性
在需要监听的时机，调用Vue.set或者vm.$set方法来向对象中添加新的属性，例如：

Vue.set(this.obj, 'key', value);
或者
this.$set(this.obj, 'key', value);

步骤三：监听对象变化
通过使用watch选项来监听对象的属性变化，例如：

watch: {
  'obj.key': function(newVal, oldVal) {
    // 对象的属性变化时的回调函数
  }
}

通过上述的操作流程，我们就可以监听到对象的变化了。当对象的属性发生变化时，watch选项中的回调函数就会被调用。

需要注意的是，使用Vue.set或者vm.$set方法添加新的属性后，该属性才会变为响应式的，如果直接通过赋值的方式添加新的属性是无法监听到的。

另外，如果需要监听对象的删除操作，可以使用Vue.delete或者vm.$delete方法来删除对象的属性。例如：

Vue.delete(this.obj, 'key');
或者
this.$delete(this.obj, 'key');

总结：
在Vue中，如果需要监听到对象的变化，可以通过使用Vue.set或者vm.$set方法来添加新的属性，然后通过watch选项来监听对象的属性变化。同样地，可以使用Vue.delete或者vm.$delete方法来删除对象的属性。这样，就可以实现对对象的变化进行监听了。