點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

vue中數組變化檢測問題

來源：懂視網責編：小采時間：2020-11-27 19:54:28

vue中數組變化檢測問題

vue中數組變化檢測問題:這次給大家帶來vue中數組變化檢測問題，vue中數組變化檢測的注意事項有哪些，下面就是實戰案例，一起來看一下。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

推薦度：

點擊下載本文 文檔為doc格式

導讀vue中數組變化檢測問題:這次給大家帶來vue中數組變化檢測問題，vue中數組變化檢測的注意事項有哪些，下面就是實戰案例，一起來看一下。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

這次給大家帶來vue中數組變化檢測問題，vue中數組變化檢測的注意事項有哪些，下面就是實戰案例，一起來看一下。

<!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>
 <p 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>
 </p>
 <script>
 var vm = new Vue({
 el: ".wrap",
 data: {
 numbers: [],
 items: [
 {name: 'jjj'},
 {name: 'kkk'},
 {name: 'lll'},
 ]
 },
 methods: {
 handle: function (index) {
 // WHY: 更新數據，view層未渲染，但通過console這個數組可以發現數據確實更新了
 if (typeof(this.numbers[index]) === "undefined" ) {
 this.numbers[index] = 1;
 } else {
 this.numbers[index]++;
 }
 }
 }
 });
 </script>
</body>
</html>

這里的實現目的很明確 --- 我希望在點擊li時先檢測是否存在，當然是不存在的，所以就將值設置為1，如果再次點擊，就讓數字累加。

但是出現的問題是：?點擊之后數字并沒有在view層更新，而通過console打印發現數據確實更新了，只是view層沒有及時的檢測到，而我一直以來的想法就是：既然vue實現的時數據雙向綁定，那么在model層發生了變化之后為什么就沒有在view層更新呢?

首先，我就考慮了這是不是數組的問題，于是，我測試了下面的例子：

例2

<!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>
 <p 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>
 </p>
 <script>
 var vm = new Vue({
 el: ".wrap",
 data: {
 numbers: [],
 items: [
 {name: 'jjj'},
 {name: 'kkk'},
 {name: 'lll'},
 ]
 },
 methods: {
 handle: function (index) {
 // 不是數組，這里更新數據就可以直接在view層渲染
 this.items[index].name += " success";
 }
 }
 });
 </script>
</body>
</html>

這時，我再測試時就發現，這里的model層發生了變化時，view層就能及時、有效的得到更新。

其中最重要的一句話就是 --- 如果對象是響應式的，確保屬性被創建后也是響應式的，同時觸發視圖更新，這個方法主要用于避開Vue不能檢測到屬性被添加的限制。

那么什么情況下Vue是不能檢測到屬性被添加呢？根據參考鏈接，我們在文檔上看到了很好的說明 --- 深入響應式原理

首先，我們要了解Vue是如何實現數據的雙向綁定的！

把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是僅 ES5 支持，且無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

知識補充：

訪問器屬性不包含數據值，他們包含一對getter函數和setter函數（這兩個函數不是必須的）。在讀取訪問器屬性時，會調用getter函數，這個函數負責返回有效的值；在寫入訪問器屬性是，會調用setter函數并傳入新值，這個函數負責決定如何處理數據。

訪問器屬性不能直接定義，必須是用Object.defineProperty()來定義。

下面是一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue</title>
</head>
<body>
 <script>
 var book={
 _year:2004,
 edition:1
 };
 Object.defineProperty(book,"year",{
 get:function(){
 return this._year;
 },
 set:function(newValue){
 if(newValue>2004){
 this._year=newValue;
 this.edition+=newValue-2004;
 }
 }
 });
 console.log(book.year); // 2004 在讀取訪問器屬性時會調用get函數
 book.year=2005; // 在給訪問器屬性賦值時會調用set函數
 console.log(book.edition); // 2
 </script>
</body>
</html>

這個例子應該可以很好的理解訪問器屬性了。

所以，當對象下的訪問器屬性值發生了改變之后（vue會將屬性都轉化為訪問器屬性，之前提到了），那么就會調用set函數，這時vue就可以通過這個set函數來追蹤變化，調用相關函數來實現view視圖的更新。

每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。即在渲染的過程中就會調用對象屬性的getter函數，然后getter函數通知wather對象將之聲明為依賴，依賴之后，如果對象屬性發生了變化，那么就會調用settter函數來通知watcher，watcher就會在重新渲染組件，以此來完成更新。

OK！既然知道了原理，我們就可以進一步了解為什么出現了之前數組的問題了！

變化檢測問題

收到現代JavaScript瀏覽器的限制，其實主要是 Object.observe() 方法支持的不好，Vue不能檢測到對象的添加或者刪除。然而Vue在初始化實例時就對屬性執行了setter/getter轉化過程，所以屬性必須開始就在對象上，這樣才能讓Vue轉化它。

所以對于前面的例子就不能理解了 --- 數組中index都可以看做是屬性，當我們添加屬性并賦值時，Vue并不能檢測到對象中屬性的添加或者刪除，但是其的確是添加或刪除了，故我們可以通過console看到變化，所以就沒有辦法做到響應式；而在第二個例子中，我們是在已有的屬性的基礎上進行修改的，這些屬性是在最開始就被Vue初始化實例時執行了setter/getter的轉化過程，所以說他們的修改是有效的，model的數據可以實時的在view層中得到相應。

補充知識：什么是 Object.observe() ？

在介紹之前，不得不殘忍的說，盡管這個方法可以在某些瀏覽器上運行，但事實是這個方法已經廢棄！

概述：此方法用于異步地監視一個對象的修改。當對象的屬性被修改時，方法的回調函數會提供一個有序的修改流，然而這個接口已經從各大瀏覽器移除，可以使用通用的proxy 對象。??????

方法：

Object.observe(obj, callback[, acceptList])

其中obj就是被監控的對象， callback是一個回調函數，其中的參數包括changes和acceptList，

changes一個數組，其中包含的每一個對象代表一個修改行為。每個修改行為的對象包含:

name: 被修改的屬性名稱。

object: 修改后該對象的值。

type: 表示對該對象做了何種類型的修改，可能的值為"add", "update", or "delete"。

oldValue: 對象修改前的值。該值只在"update"與"delete"有效。

acceptList在給定對象上給定回調中要監視的變化類型列表。如果省略， ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] 將會被使用。

var obj = {
 foo: 0,
 bar: 1
};
Object.observe(obj, function(changes) {
 console.log(changes);
});
obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]
obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

vue中數組變化檢測問題

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 檢測問題

熱門焦點

vue中數組變化檢測問題

vue中數組變化檢測問題

vue中數組變化檢測問題

最新推薦

猜你喜歡

熱門推薦