为什么能监听到数组里面某个元素的属性变化

[seafronthu]

无子组件：
https://codepen.io/seafronthu/pen/NWOpEvW?editors=1111
vue版本：vue@2.6.0或2.7
点击【点我】按钮结果变成10了，为什么能监听到属性的变化.

有子组件：
https://codepen.io/seafronthu/pen/xxyqQMz?editors=1111
vue版本：vue@2.6.0或2.7
点击【点我】按钮结果变成2了，为什么props中的item没有改变（watch没有触发）也能监听到属性a的变化.

有子组件（setup）：
https://codepen.io/seafronthu/pen/oNaZQKm?editors=1111
vue版本：vue@2.7
在setup中使用watch（触发了）反而能监听到item的变化，实际上我没有更新item
以上跟预期的不符

[edison1105]

• 第一个demo：data[0]是个响应式对象， 所以 data[0]重新赋值会触发变化
• 第二个demo：data[0]也是个响应式对象，data[0].a=2并没有对data[0]重新赋值，所以你需要deep watch才能检测到变化
• 第三个demo: 2.7里面，watch响应式对象会默认给加上deep

以上

[seafronthu]

• 第一个demo: 数组是响应式吧。data[0]不是响应式，- data[0].a = 2 这行去掉数据没有变化； - data[0] = {a:10, key: "dasdwewe"} 这行代码去掉，能监听到数据变 2；但是这两行都在最后的结果却是 10。
• 第二个demo：是没有赋值，也没有监听到，但是为什么点击之后结果会渲染为 2。
• 第三个demo: vue2.7中的watch中效果不是和vue3的一样吗？deep默认是false。
  

[edison1105]

第三个demo: vue2.7中的watch中效果不是和vue3的一样吗？deep默认是false。

当然不一样了，如果一样，2.6升级2.7就有bug了。源码里有判断watch的如果是个响应式对象，deep就是true了。

[seafronthu]

好的，第三点我去看下2.7源码（麻烦告知下为什么需要升到2.7需要把deep改成true）。但是第一点和第二点你看我回复的，麻烦解答下。

[seafronthu]

第三个demo: vue2.7中的watch中效果不是和vue3的一样吗？deep默认是false。

当然不一样了，如果一样，2.6升级2.7就有bug了。源码里有判断watch的如果是个响应式对象，deep就是true了。

但是我尝试2.7不引入watch，直接在对象里面用watch也没有触发深度监听呀。

[seafronthu]

第三个demo: vue2.7中的watch中效果不是和vue3的一样吗？deep默认是false。

当然不一样了，如果一样，2.6升级2.7就有bug了。源码里有判断watch的如果是个响应式对象，deep就是true了。

我看了源码，你说的有问题，我的ref不会深度监听，只有满足isReactive条件才会deep=true。

[seafronthu]

• 第一个demo：data是个响应式对象，但是data[0]不是响应式的，所以直接复制data[0]={a:2,key: "dasdasd"}视图是不会更新的；data[0]里面的属性是响应式的，所以data[0].a赋值视图会重新更新；注 ：当使用data[0].b（额外属性赋值的时候是监听不到的）

Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

• 第二个demo：data[0].a=2并没有让data数组更新，所以没有item没有变化，但是可以触发视图更新（data[0]里面的属性是响应式的），如果要触发optionApi中的watch需要手动添加deep。
• 第三个demo: 2.7里面，组合式apiwatch会默认给Reactive对象添加deep。