溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問(wèn)題

發(fā)布時(shí)間：2021-07-16 10:31:03 來(lái)源：億速云 閱讀：127 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下如何解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問(wèn)題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

來(lái)看一個(gè)實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // WHY: 更新數(shù)據(jù)，view層未渲染，但通過(guò)console這個(gè)數(shù)組可以發(fā)現(xiàn)數(shù)據(jù)確實(shí)更新了
   if (typeof(this.numbers[index]) === "undefined" ) {
   // 注：下面這么設(shè)置是可以的。例如 
   // var arr = [];
   // arr[3]=3;
   // console.log(arr) //[empty × 3, 3]
    this.numbers[index] = 1; 
   // this.numbers.splice(index,0,1) //用splice方法能同步顯示，但得不到想要的效果
   } else {
    this.numbers[index]++;
   // this.numbers.splice(index,1,this.numbers[index]++)
   }
  // console.log(this.numbers)
  }
  }
 });
 
 </script>
</body>
</html>

想實(shí)現(xiàn)的效果是點(diǎn)擊 li 看 vm.nymbers[index] 是否存在，不存在設(shè)置為1，存在的話加1。

點(diǎn)擊之后數(shù)字并沒(méi)有在view層更新，而通過(guò)console打印發(fā)現(xiàn)數(shù)據(jù)更新了，只是view層沒(méi)有及時(shí)的檢測(cè)到。

再看一個(gè)改動(dòng)之后的：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <!--<span>{{numbers[index]}}</span>-->
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  // numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   // 不是數(shù)組，這里更新數(shù)據(jù)就可以直接在view層渲染
   this.items[index].name += " success";
  // console.log(this.numbers)
  }
  }
 });
 </script>
</body>
</html>

可以看到這里的view層能及時(shí)得到更新，但是到了數(shù)組哪里為什么就不可以了呢？

來(lái)看Vue2.0官方的文檔說(shuō)明：

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

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength

為了解決第一類(lèi)問(wèn)題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將觸發(fā)狀態(tài)更新：

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue)

你還可以使用 vm.$set 實(shí)例方法，它只是全局 Vue.set 的別名。

還是由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：

var vm = new Vue({
 data: {
 a: 1
 }
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
vm.b = 2
// `vm.b` 不是響應(yīng)式的

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。例如，對(duì)于：

var vm = new Vue({ 
 data: { 
 userProfile: { 
  name: 'Anika' 
 } 
 } 
})

有時(shí)你可能需要為已有對(duì)象賦予多個(gè)新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應(yīng)該用兩個(gè)對(duì)象的屬性創(chuàng)建一個(gè)新的對(duì)象。所以，如果你想添加新的響應(yīng)式屬性，不要像這樣：

Object.assign(this.userProfile, { 
 age: 27, 
 favoriteColor: 'Vue Green' 
})

應(yīng)該這樣做：

this.userProfile = Object.assign({}, this.userProfile, { 
 age: 27, 
 favoriteColor: 'Vue Green' 
})

因此，上面例子應(yīng)該改為：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
 <style>
 li:hover {
  cursor: pointer;
 }
 </style>
</head>
<body>
 <div class="wrap">
 <ul>
  <li v-for="item,index in items" v-on:click="handle(index)">
  <span>{{item.name}}</span>
  <span>{{numbers[index]}}</span>
  </li>
 </ul>
 </div>
 <script>
 var vm = new Vue({
  el: ".wrap",
  data: {
  numbers: [],
  items: [
   {name: 'jjj'},
   {name: 'kkk'},
   {name: 'lll'},
  ]
  },
  methods: {
  handle: function (index) {
   if (typeof(this.numbers[index]) === "undefined" ) {
    this.$set(this.numbers, index, 1);  //(arr,index,newvalue)
   } else {
    this.$set(this.numbers, index, ++this.numbers[index]);
   }
  }
  }
 });
 </script>
</body>
</html>

搞定！

1.17補(bǔ)充-------------------------------

如何理解“對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性”？

例如：

var vm=new Vue({ 
 el:'#test', 
 data:{ 
  //data中已經(jīng)存在info根屬性 
  info:{ 
   name:'小明' 
  } 
 } 
}); 
//給info添加一個(gè)性別屬性 
Vue.set(vm.info,'sex','男');

上面是正確做法，下面的做法的話就會(huì)報(bào)錯(cuò)了：

Vue.set(vm.data,'sex','男')

實(shí)際上，不能直接在data上增加屬性，但可以在data里的對(duì)象上增加屬性。

實(shí)際上vm.data是undefined。

看完了這篇文章，相信你對(duì)“如何解決Vue不能檢測(cè)數(shù)組或?qū)ο笞儎?dòng)的問(wèn)題”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手