Vue.extend構造器的延伸 Vue.set全域性操作
阿新 • • 發佈：2019-01-26
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>vue.extend-擴充套件例項構造器</title></head><body> <h1>vue.extend-擴充套件例項構造器</h1> <hr> <
var outData={
count:1,
goodName:'car'
};
var app=new Vue({
el:'#app',
//引用外部資料
data:outData
})
Vue.set(outData,'count',4);
}
看一個簡單的程式碼：
//在構造器外部宣告資料var outData={
count:1,
goodName:'car'
};
var app=new Vue({
el:'#app',
//引用外部資料
data:outData
})
在外部改變資料的三種方法：
1、用Vue.set改變
function add(){Vue.set(outData,'count',4);
}
2、用Vue物件的方法新增
| 1 | app.count++; |
3、直接操作外部資料
| 1 | outData.count++; |
為什麼要有Vue.set的存在?
由於Javascript的限制，Vue不能自動檢測以下變動的陣列。
*當你利用索引直接設定一個項時，vue不會為我們自動更新。
*當你修改陣列的長度時，vue不會為我們自動更新。