Vue.set 的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。比如在vue構造器內部定義了一個count為1的數據，我們在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就需要用到Vue.set。
一、引用構造器外部數據：
什么是外部數據，就是不在Vue構造器里里的data處聲明，而是在構造器外部聲明，然后在data處引用就可以了。外部數據的加入讓程序更加靈活，我們可以在外部獲取任何想要的數據形式，然后讓data引用。
看一個簡單的代碼：
|
1
2
3
4
5
6
7
8
9
10
|
//在構造器外部聲明數據
var outData={
count:1,
goodName:'car'
};
var app=new Vue({
el:'#app',
//引用外部數據
data:outData
})
|
二、在外部改變數據的三種方法：
1、用Vue.set改變
|
1
2
3
|
function add(){
Vue.set(outData,'count',4);
}
|
2、用Vue對象的方法添加
|
1
|
app.count++;
|
3、直接操作外部數據
|
1
|
outData.count++;
|
其實這三種方式都可以操作外部的數據，Vue也給我們增加了一種操作外部數據的方法。
三、為什么要有Vue.set的存在?
由於Javascript的限制，Vue不能自動檢測以下變動的數組。
*當你利用索引直接設置一個項時，vue不會為我們自動更新。
*當你修改數組的長度時，vue不會為我們自動更新。
看一段代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Vue.set 全局操作</title>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button onclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已經執行了");
app.arr[1]='ddd';
//Vue.set(app.arr,1,'ddd');
}
var outData={
arr:['aaa','bbb','ccc']
};
var app=new Vue({
el:'#app',
data:outData
})
</script>
</body>
</html>
|
這時我們的界面是不會自動跟新數組的，我們需要用Vue.set(app.arr,1,’ddd’)來設置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。