Vue入门指南——数组变异方法

「爱情、让人受尽委屈。」 2023-07-02 08:25 24阅读 0赞

## 一、数组变异方法 ##

*  在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
 *  变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

<table> 
 <thead> 
  <tr> 
   <th><code>push()</code></th> 
   <th>往数组最后面添加一个元素，成功返回当前数组的长度</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>pop()</code></td> 
   <td>删除数组的最后一个元素，成功返回删除元素的值</td> 
  </tr> 
  <tr> 
   <td><code>shift()</code></td> 
   <td>删除数组的第一个元素，成功返回删除元素的值</td> 
  </tr> 
  <tr> 
   <td><code>unshift()</code></td> 
   <td>往数组最前面添加一个元素，成功返回当前数组的长度</td> 
  </tr> 
  <tr> 
   <td><code>splice()</code></td> 
   <td>有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值</td> 
  </tr> 
  <tr> 
   <td><code>sort()</code></td> 
   <td>sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组</td> 
  </tr> 
  <tr> 
   <td><code>reverse()</code></td> 
   <td>reverse() 将数组倒序，成功返回倒序后的数组</td> 
  </tr> 
 </tbody> 
</table>

## 二、替换数组 ##

*  不会改变原始数组，但总是返回一个新数组

<table> 
 <thead> 
  <tr> 
   <th>filter</th> 
   <th>filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat</td> 
   <td>concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组</td> 
  </tr> 
  <tr> 
   <td>slice</td> 
   <td>slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组</td> 
  </tr> 
 </tbody> 
</table>

## 三、修改响应式数据 ##

*  Vue.set(vm.items, indexOfItem, newValue)
 *  vm.$set(vm.items, indexOfItem, newValue)  
    ① 参数一表示要处理的数组名称或者对象  
    ② 参数二表示要处理的数组的索引或者对象名  
    ③ 参数三表示要处理的数组的值或对象的值

--------------------

参考链接：[https://cn.vuejs.org/v2/guide/list.html\#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method][https_cn.vuejs.org_v2_guide_list.html_E5_8F_98_E5_BC_82_E6_96_B9_E6_B3_95-mutation-method]

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~  
[博主主页 Poetic Code][Poetic Code]

[https_cn.vuejs.org_v2_guide_list.html_E5_8F_98_E5_BC_82_E6_96_B9_E6_B3_95-mutation-method]: https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method
[Poetic Code]: https://blog.csdn.net/weixin_44253336