vue2 为什么只能监听对象
-
Vue2只能监听对象的原因是因为Vue2采用了数据劫持的方式来实现数据的双向绑定。Vue2利用Object.defineProperty方法对对象的属性进行劫持，从而实现对数据的监听和响应。
具体来说，Vue2会在初始化阶段遍历data对象的属性，并通过Object.defineProperty将每个属性转化为getter和setter。当数据发生变化时，setter会被调用，并通知所有依赖该属性的地方进行更新。
但是，这种方式只对对象的属性进行了劫持，对于新增或删除属性是无法监听的。这是因为Object.defineProperty只能劫持已有属性，无法劫持对象的整个变化。因此，Vue2只能监听对象的属性，而不能监听整个对象的变化。
需要注意的是，Vue2可以使用Vue.set或者this.$set方法来给对象新增属性，并且这样新增的属性也是可以被监听的。这是因为Vue.set方法内部会使用Object.defineProperty来劫持新添加的属性。
总结起来，Vue2只能监听对象的属性，是因为它采用了数据劫持的方式来实现双向绑定，而数据劫持只能对对象的属性进行劫持。
2年前 0条评论 -
Vue.js是一款流行的JavaScript框架，具有响应式数据绑定的能力。在Vue.js中，可以使用
$watch方法来监听特定数据的变化，并在数据发生变化时执行相应的操作。在Vue.js 2.x版本中，为什么只能监听对象呢？原因如下：
-
对象是引用类型：在JavaScript中，对象是引用类型，而基本类型（如字符串、数字等）是值类型。引用类型在传递和赋值时都是传递的引用地址，而不是值本身，因此通过监听对象可以更容易地追踪对象的变化。
-
对象的属性是动态的：对象的属性可以随时新增、更新或删除，这使得对对象进行监听更具有灵活性。而基本类型的值是不可变的，无法直接监测变化。
-
避免性能开销：在Vue.js的内部实现中，监听对象的变化是通过使用了ES6的
Proxy对象来实现的。Proxy对象可以拦截对对象的访问和操作，并在发生变化时触发相应的操作。相比起监听基本类型的值，使用Proxy对象来监听对象的变化能够更高效地实现响应式数据的更新。 -
适应复杂的数据结构：在现代的Web开发中，前端应用的数据结构往往会比较复杂，包含嵌套对象、数组等多层次的结构。通过监听对象，可以方便地追踪这些复杂数据结构中的变化。
-
可以进行深度监听：Vue.js提供了
deep选项，可以在监听对象时指定是否进行深度监听。深度监听会递归地监听对象的所有嵌套属性，使得任何属性的变化都可以被捕获。这对于需要精确追踪数据变化的场景非常有用。
总结来说，Vue.js只能监听对象是为了提供更高效、更灵活地实现响应式数据绑定，方便开发者对复杂数据结构进行追踪和更新。
2年前 0条评论 -
-
Vue 2.x 中的数据监听系统主要是基于 Object.defineProperty，它是 JavaScript 标准提供的一个用来定义属性特性的方法。而 Object.defineProperty 方法只能监听对象的属性，无法监听数组的变化。所以在 Vue 2.x 版本中，只能监听对象的变化，无法直接监听数组的变化。
具体来说，Object.defineProperty 方法可以通过一个 get 和一个 set 函数来定义一个属性的 getter 和 setter 方法，当对这个属性进行读取或修改时，就会触发相应的 getter 或 setter 方法。而 Vue.js 利用这个特性，在 data 中定义的对象的属性上添加了 getter 和 setter 方法，以实现数据劫持并能够在属性被访问或修改时触发相应的响应式更新。
然而，对于数组来说，由于 JavaScript 的限制，数组是一种特殊的对象，它本质上是由数字索引和 length 属性组成的。当我们使用索引直接修改数组中的某一项时，并不会触发 setter 方法，因为这个索引实际上是对数组对象的引用，并不是数组对象的属性名。这种情况下，Vue 无法感知到数组的变化，导致无法进行响应式更新。
为了解决这个问题，Vue 提供了一些数组特定的方法，例如 push、pop、shift、unshift、splice、sort、reverse 等，通过重写这些方法，在执行它们时能够触发数据更新的通知。同时，Vue 也提供了 $set 方法来解决直接修改数组索引的问题，使用 $set 方法可以将新的值设置到数组指定索引的位置，并触发响应式更新。
总结起来，Vue 2.x 中只能监听对象的变化是因为所使用的数据监听系统是基于 Object.defineProperty 方法，而这个方法只能监听对象的属性，无法直接监听数组的变化。为了解决数组监听的问题，Vue 提供了一些数组特定的方法和 $set 方法来完成响应式更新。
2年前 0条评论
