Vue2.0 【第二季】第3节 Vue.set全局操作
目录
第3节：Vue.set全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
一、引用构造器外部数据
什么是外部数据，就是不在Vue构造器里的data处声明，而是在构造器外部声明，然后在data处引用。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。 看一个简单的代码：
//在构造器外部声明数据
var outData={
count:1,
goodName:'car'
};
var app=new Vue({
el:'#app',
//引用外部数据
data:outData
})
html代码：
<div id="app">
{{count}}
</div>
浏览器依然输出1
二、在外部改变数据的三种方法：
1、用Vue.set改变
js中加入：
function add(){
Vue.set(outData,'count',4);
}
html改为：
<div id="app">
{{count}}
</div>
<p><button onclick="add()">add</button></p>
点击按钮数字就会变成4：
2、用Vue对象的方法添加
js中加入：
function add(){
app.count++;
}
浏览器实现按钮逐次加一
3、直接操作外部数据
js中加入：
function add(){
outData.count++;
}
同样实现按钮逐次加一的效果
其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。
三、为什么要有Vue.set的存在？
由于Javascript的限制，Vue不能自动检测以下变动的数组。
- 当你利用索引直接设置一个项时，vue不会为我们自动更新。
- 当你修改数组的长度时，vue不会为我们自动更新。
看一段代码：
<!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存在的意义。