Vue.set作用:在构造器外部操作构造器内部的数据、属性或者方法。比如在构造器内部定义了一个count为1 的数据,我们在构造器外部定义了一个方法,每次点击按钮使值加1.此时需要用到Vue.set。
一。引用构造器外部数据 :
外部数据:不在Vue构造器里的data处声明,而是在构造器外部声明,然后在data处引用就可以了。
好处:让程序更加灵活,可以在外部获取任何想要的数据形式,然后让data引用。
//构造器外部声明数据
var outData = {
count : 1,
goodName : 'car'
};
var app = new Vue({
el : "#app",
//引用外部数据
data : outData
});
二。在外部改变数据的三种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue.directive 自定义指令</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<h1>vue.directive 自定义指令</h1>
<hr>
<div id="app">
{{ count }}
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
<p><button onclick="add()">add</button></p>
</div>
<script>
function add(){
//第一种方法,用Vue.set改变外部数据
// Vue.set(outData,'count',2);
//第二种方法,用它的属性
//app.count++;
//第三种方法,用原生的方法
outData.count++;
}
var outData = {
count : 1,
// goods : 'car'
arr : ['aaa','bbb','ccc']
}
var app = new Vue({
el : "#app",
data :outData, //引用外部数据
})
</script>
</body>
</html>
1.用Vue.set改变
2.
3.
****有第二、三种方法,为什么还要使用第一种呢?
当我们操作数组时,在用数组下标的时候改变值,Vue不会自动更新。这是JS的一种限制。为了突破限制,Vue提出了Vue.set这种方法
实例解释如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue.directive 自定义指令</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<h1>vue.directive 自定义指令</h1>
<hr>
<div id="app">
{{ count }}
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
<p><button onclick="add()">add</button></p>
</div>
<script>
function add(){
app.arr[1]='ddd';
}
var outData = {
count : 1,
// goods : 'car'
arr : ['aaa','bbb','ccc']
}
var app = new Vue({
el : "#app",
data :outData, //引用外部数据
})
</script>
</body>
</html>
在上面这种情况下,数组第二个元素bbb不会发生改变变成ddd。
如果加一个语句使dom重新渲染,则bbb会变成ddd。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue.directive 自定义指令</title>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
<h1>vue.directive 自定义指令</h1>
<hr>
<div id="app">
{{ count }}
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
<p><button onclick="add()">add</button></p>
</div>
<script>
function add(){
outData.count++;
app.arr[1]='ddd';
}
var outData = {
count : 1,
// goods : 'car'
arr : ['aaa','bbb','ccc']
}
var app = new Vue({
el : "#app",
data :outData, //引用外部数据
})
</script>
</body>
</html>
总结:Vue.set存在的意义:在虚拟DOM的值里面用下标的方式只改变数组的值的时候,Vue是监测不到的.
所以vue提供了Vue.set方法,能够在我们在外部监测到,即Vue的意义。