最近在做乙個多上傳的元件，需求是做到多檔案依次上傳，並顯示上傳進度條。
邏輯部分實現了以後，在更新進度條檢視的時候出現一點問題：動態計算生產的進度 progress 屬性不會自動更新。
原來的**是這樣寫的：
let files = this.filepicker.files;
if(!files.length)
let arr =;
for(let i = 0, len = files.length; i < len; i++)
this.filearr = arr;
這裡直接將 file 物件新增乙個 progress 屬性記錄上傳進度，並初始化為0，然後上傳時候實時計算更新 progress。但奇怪的是這個 progress 在檢視裡並不會自動更新，巋然不動，一直都是0。還了n中辦法，百思不得其解。
後來一怒之下做了乙個小 demo，看看問題到底出現在**，把不想關的**都剔除，只保留核心**，並用最簡單的資料來模擬一下。**如下：
//用陣列模擬 files, 用物件模擬 file 物件
let files =;
for(let i = 0, len = 5; i < len; i++) ;
files.push(obj);
}let arr =;
for(let i = 0, len = files.length; i < len; i++)
這裡僅僅是把 files 物件換成了陣列來模擬，把 file 物件換成了普通物件模擬。
神奇的是，這樣居然就自動更新了。
由於檔案 file 後來都儲存在陣列裡，這說明唯一的區別就在 file 物件上面！於是打算用普通物件儲存 file 物件的屬性再試試。
let files = this.filepicker.files;
if(!files.length)
let arr =;
for(let i = 0, len = files.length; i < len; i++) ;
obj.name =item.name;
obj.size =item.size;
obj.progress = '0';
arr.push(obj);
}
這樣檢視也是可以自動更新的，果然是 file 物件和普通物件的區別。
它們究竟是什麼區別呢？看一下他們的型別先。
console.log('files type', object.prototype.tostring.call(files));
//files type [object filelist]
console.log('arr type', object.prototype.tostring.call(arr));
//arr type [object array]
console.log('item type', object.prototype.tostring.call (files[0]));
//item type [object file]
console.log('obj type', object.prototype.tostring.call (obj));
//obj type [object object]
原來 files 是 filelist 型別，file 是 file 型別。而普通的 obj 是 object 型別。
vue 的資料更新利用的是 object.defineproperty 的 getter setter 函式來實現的，而 vue 預設沒有對 file 物件設定 getter setter, 因此用 file 物件不會自動更新。
解決辦法，就是用普通物件儲存 file 物件裡需要的資訊，然後用來構造檢視資料。或者自己手動設定 file 物件的 setter，也可以自動更新。**如下：
<div
id>
<
input
type
="text"
id='a'
>
<
span
id='b'
>
span
>
<
input
type
="file"
id='file'
>
<
button
type
="button"
id='button'
>點選更改file屬性
button
>
div>
<
script
>
//普通物件設定 setter
varobj
={};
object.defineproperty(obj,
'hello',
});document.addeventlistener(
'keyup',
function
(e));
//file 物件設定 setter
varfileinput
=document.getelementbyid(
'file');
varfile;
fileinput.addeventlistener(
'change',
function
(e) });
});document.getelementbyid(
'button
').addeventlistener(
'click',
function
());
script
>
Vue 普通物件資料更新與 file 物件資料更新
最近在做乙個多上傳的元件，需求是做到多檔案依次上傳，並顯示上傳進度條。邏輯部分實現了以後，在更新進度條檢視的時候出現一點問題 動態計算生產的進度 progress 屬性不會自動更新。原來的 是這樣寫的 let files this.filepicker.files if files.length l...
vue更新陣列和物件
vue更新陣列和物件 陣列更新檢測 更改陣列物件 let items this.formvalidate.items items.map item,index item,this.set this.formvalidate.items,index,item 複製 問題彙總 修改hosts c win...
vue無法更新資料（vue響應式）
原因 今天寫專案的時候頁面有乙個標題和狀態一直沒有發生變化。我一開始以為是非同步的問題，也確實，非同步方面確實存在問題。但是當解決非同步問題之後，發現我所需要的資料和狀態依舊沒有發生改變。如圖，1部分，我為了驗證非同步問題做了延遲處理。但是延遲3秒之後資料改變但是頁面引數依舊沒有改變。所以我在頁面上...