詳解vue 數(shù)組和對(duì)象渲染問題

更新時(shí)間：2018年09月21日 09:23:31 作者：Timao

這篇文章主要介紹了詳解vue 數(shù)組和對(duì)象渲染問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近項(xiàng)目有點(diǎn)忙碌，遇到好多問題都沒有總結(jié)(╥﹏╥)，在開發(fā)過程中，取vuex中的數(shù)組渲染完成之后，再次修改數(shù)組的值，數(shù)據(jù)更新了，但是視圖并沒有更新。以為是數(shù)組更新的問題，后來又以為是因?yàn)関uex導(dǎo)致的問題. 最后強(qiáng)制刷新組件解決了問題，但是還沒有找到根本問題的所在...

數(shù)組更新檢測(cè)

在 vue 中使用數(shù)組的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法時(shí)，改變數(shù)組的同時(shí)可以觸發(fā)視圖的變化。
注意：有兩種情況 vue 無法檢測(cè)到變動(dòng)的數(shù)組，分別是：

（1）直接操作數(shù)組的長(zhǎng)度；

// Vue.set
this.$set(arr, indexOfItem, newValue)
// Array.prototype.splice
this.arr.splice(indexOfItem, 1, newValue)

(2)利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：this.arr[indexOfItem] = newValue

this.arr.splice(newLength)

demo如下：

<template>
 <div class="demo">
 <div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div>
 <div class="change-btn" @click="changeArr">改變列表的值</div>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  index: 0,
  arr: [{
   elements: [{
   name: '0'
   }, {
   name: '1'
   }, {
   name: '2'
   }]
  }]
 
  }
 },
 methods: {
  changeArr() {
  // 可以改變數(shù)組的值
   this.arr[0].elements.push({
   name: '3'
   })
  // this.arr[0].elements[1].name = '4' 可以改變數(shù)組的值
  // this.arr[0].elements[1] = { 無法改變數(shù)組的值
  // name: '4'
  // }
  }
 }
 }
</script>

問題：用v-for循環(huán)渲染數(shù)組數(shù)據(jù)時(shí)，數(shù)據(jù)更新了，視圖卻沒有更新

由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

1. 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
2. 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength

解決方法：

為了避免第一種情況，以下兩種方式將達(dá)到像 vm.items[indexOfItem] = newValue 的效果，同時(shí)也將觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue) （數(shù)組， 所引， 值） 
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) （所引， 長(zhǎng)度， 值）

避免第二種情況，使用 splice：

example1.items.splice(newLength)

對(duì)象更新檢測(cè)

方法一：this.$set()

方法二：Object.assign()

demo.vue

<template>
 <div class="demo">
 {{object}}
 <div class="change-btn" @click="changeArr">改變列表的值</div>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  index: 0,
  object: {
   name: 'haha'
  }
  }
 },
 methods: {
  changeArr() {
  // 方法一： 
   this.$set(this.object, 'age', 27)
  // 方法二：
   this.object = Object.assign({}, this.object, {
   age: 27
   })
  // 方法三： ---不可行
   this.object.age = '27'
  }
 }
 }
 </script>

補(bǔ)充：

this.$forceUpdate()迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
使用 v-if 在切換時(shí)，元素及它的綁定數(shù)據(jù)和組件都會(huì)被銷毀并重建

參考文獻(xiàn)

https://cn.vuejs.org/v2/api/#vm-forceUpdate
https://cn.vuejs.org/v2/guide/list.html?#

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: