Vue.set
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
<!DOCTYPE html>
<html>
<head>
<title>Vue.set</title>
</head>
<body>
<div id="app">
<p>{{count}}--{{firstName}}</p>
</div>
<button onclick="addset()">Vue set</button>
<button onclick="addApp()">addApp</button>
<button onclick="outAdd()">outAdd</button>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var outData={
count:1,
firstName:'xia'
}
var app=new Vue({
el:'#app',
data:outData,
})
//在外部改变数据的三种方法
//用Vue.set改变
function addset(){
// Vue.set(outData,'count',4)
}
//用Vue对象的方法添加
function addApp(){
app.count++;
}
//直接操作外部数据
function outAdd(){
outData.count+=2;
}
</script>
</body>
</html>
为什么要有Vue.set的存在?
由于Javascript的限制，Vue不能自动检测以下变动的数组。
*当你利用索引直接设置一个项时，vue不会为我们自动更新。
*当你修改数组的长度时，vue不会为我们自动更新。
<!DOCTYPE html>
<html>
<head>
<title>Vue.set</title>
</head>
<body>
<div id="app">
<ul>
<li v-for='item in arrs'>{{item}}</li>
</ul>
</div>
<button onclick="add()">改变值</button>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
function add(){
console.log('已经执行');
//无法改变数组中的值
// outData.arrs[1]='bbb2';
Vue.set(app.arrs,1,'ddd'); //此时使用Vue.set设置，vue才会自动更新
}
var outData={
arrs:['aaa','bbb','ccc']
}
var app=new Vue({
el:'#app',
data:outData,
})
</script>
</body>
</html>
网友评论