vue中如何对象和数组数据的变化产生响应式

不念不忘少年蓝@ 2023-06-14 10:36 28阅读 0赞

做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。

换了关键词搜索找到了相关方法。

其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。

\-------------------------------------------

## 数组更新检测 ##

### 变异方法 ###

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

*  `push()`
 *  `pop()`
 *  `shift()`
 *  `unshift()`
 *  `splice()`
 *  `sort()`
 *  `reverse()`

你打开控制台，然后用前面例子的 `items` 数组调用变异方法：`example1.items.push({ message: 'Baz' })` 。

### 替换数组 ###

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：`filter()`, `concat()` 和 `slice()` 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      example1.items = example1.items.filter( 
     <span><span>function (<span>item) { </span></span></span> 
    </div> 
    <div> 
     <span>return item.message.match(<span>/Foo/)</span></span> 
    </div> 
    <div>
      }) 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

### 注意事项 ###

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1.  当你利用索引直接设置一个项时，例如：`vm.items[indexOfItem] = newValue`
2.  当你修改数组的长度时，例如：`vm.items.length = newLength`

为了解决第一类问题，以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果，同时也将触发状态更新：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>// Vue.set</span> 
    </div> 
    <div>
      Vue.set(example1.items, indexOfItem, newValue) 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>// Array.prototype.splice</span> 
    </div> 
    <div>
      example1.items.splice(indexOfItem,&nbsp; 
     <span>1, newValue)</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

为了解决第二类问题，你可以使用 `splice`：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      example1.items.splice(newLength) 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## 对象更改检测注意事项 ##

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>var vm =&nbsp;<span>new Vue({ </span></span> 
    </div> 
    <div> 
     <span>data: { </span> 
    </div> 
    <div> 
     <span>a:&nbsp;<span>1</span></span> 
    </div> 
    <div>
      } 
    </div> 
    <div>
      }) 
    </div> 
    <div> 
     <span>// `vm.a` 现在是响应式的</span> 
    </div> 
    <div>
      &nbsp; 
    </div> 
    <div>
      vm.b =&nbsp; 
     <span>2</span> 
    </div> 
    <div> 
     <span>// `vm.b` 不是响应式的</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 `Vue.set(object, key, value)` 方法向嵌套对象添加响应式属性。例如，对于：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>var vm =&nbsp;<span>new Vue({ </span></span> 
    </div> 
    <div> 
     <span>data: { </span> 
    </div> 
    <div> 
     <span>userProfile: { </span> 
    </div> 
    <div> 
     <span>name:&nbsp;<span>'Anika'</span></span> 
    </div> 
    <div>
      } 
    </div> 
    <div>
      } 
    </div> 
    <div>
      }) 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

你可以添加一个新的 `age` 属性到嵌套的 `userProfile` 对象：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      Vue.set(vm.userProfile,&nbsp; 
     <span>'age',&nbsp;<span>27)</span></span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

你还可以使用 `vm.$set` 实例方法，它只是全局 `Vue.set` 的别名：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>this.$set(<span>this.userProfile,&nbsp;<span>'age',&nbsp;<span>27)</span></span></span></span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

有时你可能需要为已有对象赋予多个新属性，比如使用 `Object.assign()` 或 `_.extend()`。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>Object.assign(<span>this.userProfile, { </span></span> 
    </div> 
    <div> 
     <span>age:&nbsp;<span>27,</span></span> 
    </div> 
    <div> 
     <span>favoriteColor:&nbsp;<span>'Vue Green'</span></span> 
    </div> 
    <div>
      }) 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

你应该这样做：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span>this.userProfile =&nbsp;<span>Object.assign({},&nbsp;<span>this.userProfile, { </span></span></span> 
    </div> 
    <div> 
     <span>age:&nbsp;<span>27,</span></span> 
    </div> 
    <div> 
     <span>favoriteColor:&nbsp;<span>'Vue Green'</span></span> 
    </div> 
    <div>
      }) 
    </div> </td> 
  </tr> 
 </tbody> 
</table>