VueJS提供了添加反应性到动态添加的属性的选项。考虑到已经创建了Vue实例并需要添加watch属性。它可以做到如下 -
创建一个文件：reactive-interface.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJS Reactive接口</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>
数据对象中有一个属性计数器(counter)被定义为1。当我们点击按钮时，计数器(counter)会增加。
Vue实例已经被创建。 为了增加监视(watch)，还需要这样做 -
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
需要使用$watch在vue实例之外添加监视。 添加了一个警报(alert())，显示计数器属性的值更改。 还增加了一个定时器功能，即setTimeout，它将计数器值设置为20。
setTimeout(
function(){
vm.counter = 20;
},2000
);
每当计数器发生变化时，watch方法中的警报就会被触发，如下图所示。
VueJS无法检测属性添加和删除。 最好的方法是始终声明属性，这些属性在Vue实例中需要被预先反应。如果需要在运行时添加属性，可以使用Vue全局Vue.set和Vue.delete方法。
1. Vue.set
此方法有助于在对象上设置属性。它用来绕过Vue无法检测属性添加的限制。
语法
Vue.set( target, key, value )
在这里，
- target：可以是一个对象或一个数组
- key：可以是字符串或数字
- value：可以是任何类型的值
下面来看一个例子。创建一个文件：vue-set.html -
在上面的例子中，在开始时使用下面的一段代码创建了一个变量myproduct。
var myproduct = {"id":1, name:"book", "price":"20.00"};
它被赋予Vue实例中的数据对象如下 -
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
考虑一下，在创建Vue实例之后，如果想添加一个属性到myproduct数组中。可以通过如下方法做到 -
vm.products.qty = "1";
下面来看看看控制台中的输出。如下所示 -
如上所见，在产品中添加数量。 get/set方法基本上增加了反应性，可用于id，name和price，不可用于qty。
不能通过添加vue对象来实现反应。VueJS大多希望在开始时创建所有的属性。 但是，如果稍后需要添加它，可以使用Vue.set。 为此，需要使用vue全局设置它，即Vue.set。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
上面示例中使用Vue.set添加数组到数组，使用下面的一段代码。
Vue.set(myproduct, 'qty', 1);
vue对象如下控制台输出。
现在，可以看到使用Vue.set添加的数量的get/set。
2. Vue.delete
该函数用于动态删除属性。
示例
Vue.delete( target, key )
在这里，
- target：可以是一个对象或一个数组
- key：可以是字符串或数字
- value：可以是任何类型的值
参考以下代码 -
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
在上面的例子中，使用了Vue.delete来从数组中删除价格。
Vue.delete(myproduct, 'price');
以下是在控制台中输出 -
删除后，只能看到价格被删除的ID和名称。也可以注意到get/set方法被删除。
