为什么 VueJS 检测到此属性被添加到数组中的对象？

Question

在下面的代码片段中，我有两个 Vue 组件，每个组件都有一个items包含两个对象的数组。items如果对象的show属性为真，则每个组件的模板都设置为显示数组的对象。数组中的第一个对象最初的show值为true。第二个对象没有show设置值。

new Vue({
  el: '#ex1',
  data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
  mounted() {
    // 2nd item's show property setting is not detected here
    this.items[1].show = true; 
  }
})

new Vue({
  el: '#ex2',
  data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
  mounted() {
    // 2nd item's show property setting IS detected...
    this.items[1].show = true; 
    
    // ...when the 1st item's show property is set to false
    this.items[0].show = false; 
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="ex1">
  Example 1:
  <div v-if="items[0].show">{{ items[0] }}</div>
  <div v-if="items[1].show">{{ items[1] }}</div>
</div>

<div id="ex2">
  Example 2:
  <div v-if="items[0].show">{{ items[0] }}</div>
  <div v-if="items[1].show">{{ items[1] }}</div>
</div>

在第一个示例中，我将数组中show第二个对象的属性设置items为true。Vue 没有检测到模板中的变化，这是意料之中的。

在第二个示例中，我将show第二个对象true的show属性设置为，然后将第一个对象的属性设置为false。在这种情况下，Vue确实会检测items数组中两个元素的变化并相应地更新模板。鉴于 Vue 的变更检测警告，我不希望情况会如此。

这似乎是一个非常无害的错误（如果它甚至符合错误的条件），所以我不确定是否值得报告。但是，我想知道是否有人能够解释这种行为。为什么Vueshow在第二个例子中检测到对象添加了属性？

Answer 1

更改（第一个对象的）反应性属性show会触发重新渲染。Vue 忠实地呈现模板引用的对象的当前状态，其中包括第二个对象。

第二个对象的 show 属性仍然不是响应式的，对它的更改不会更新 Vue。这只是触发更新的第一个对象上反应性属性状态的更改。

换句话说，改变第二个对象的show属性，因为是事后添加的，永远不会更新Vue，但是改变第一个对象的show属性会一直更新，更新只会渲染当前状态数组，无论它是如何添加的。

我不会认为这是一个错误。

查看差异的一种简单方法是在更新后将阵列记录到控制台。你会看到第二个对象的 show 属性没有被观察到，但仍然存在。

编辑 我想根据评论稍微澄清一下。第二个对象的变化之所以出现在 Vue 中，是因为整个 Vue 都被重新渲染了，第二个对象在 Vue 中直接被引用了。例如，如果您将值向下传递给组件，则不会重新渲染第二个对象。

这是一个示例，显示当值传递给组件时，第二个对象永远不会更新（因为组件管理渲染）。

console.clear()
 
 Vue.component("item", {
  props: ["item"],
  template: `
    <div>Item Show: {{item.show}}</div>
  `
 })
 
 new Vue({
      el: '#ex2',
      data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
      mounted() {
        // 2nd item's show property setting IS detected...
        this.items[1].show = true; 
        
        // ...when the 1st item's show property is set to false
        this.items[0].show = false; 
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="ex2">
  This will show false, because that is the current state and this object's show
  property is reactive
  <item :item="items[0]"></item>
  <hr>
  This will not show *anything*, despite the current state of show=true
  because the object's show property is not reactive
  <item :item="items[1]"></item>
</div>