Vue.set全局操作
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。
一、引用构造器外部数据:
什么是外部数据,就是不在Vue构造器里里的data处声明,而是在构造器外部声明,然后在data处引用就可以了。外部数据的加入让程序更加灵活,我们可以在外部获取任何想要的数据形式,然后让data引用。
如下代码:
//在构造器外部声明数据
var outData = {
count:1,
goods:'car'
};
var app = new Vue({
el: '#app',
data: outData
})
二、在外部改变数据的三种方法:
1.用Vue.set改变
function add(){
Vue.set(outData,'count',4);
}
2.用Vue对象的方法添加
app.count++;
3.直接操作外部数据
outData.count++;
其实这三种方式都可以操作外部的数据,Vue也给我们增加了一种操作外部数据的方法。
三、为什么要有Vue.set的存在?
由于JavaScript的限制,Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时,vue不会为我们自动更新。
当你修改数组的长度时,vue不会为我们自动更新。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>Vue.set全局操作</title>
</head>
<body>
<h1>Vue.set全局操作</h1>
<hr>
<div id="app">
{{count}}
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<p><button onclick="add()">add</button></p>
</body>
<script src="../dist/vue.js"></script>
<script>
function add() {
//Vue.set(outData,'count',2);
//app.count++;
//outData.count++;
//app.arr[1] = 'ddd';
Vue.set(app.arr,1,'dd');
}
var outData = {
count:1,
// goods:'car'
arr:['aaa','bbb','ccc']
};
var app = new Vue({
el: '#app',
data: outData
})
</script>
</html>
这时我们的界面是不会自动跟新数组的,我们需要用Vue.set(app.arr,1,’dd’)来设置改变,vue才会给我们自动更新,这就是Vue.set存在的意义。