VueJS提供了向属性添加反应性的选项，这些属性是动态添加的。考虑到我们已经创建了vue实例，需要添加watch属性。它可以做到如下:
例
<html>
<head>
<title>VueJs Instance - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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>在数据对象中有一个定义为1的属性计数器。当我们点击按钮时，计数器增加。
Vue实例已创建。要添加监视，我们需要执行以下操作-
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});我们需要使用$ watch在vue实例之外添加watch。添加了一个警报，该警报显示counter属性的值更改。还添加了一个计时器功能，即setTimeout，它将计数器值设置为20。
setTimeout(
function(){
vm.counter = 20;
},2000
);每当更改计数器时，都会触发watch方法的警报，如以下屏幕截图所示。
VueJS无法检测到属性的添加和删除。最好的方法是始终声明属性，该属性需要在Vue实例中预先作出反应。如果需要在运行时添加属性，可以使用Vue全局，Vue.set和Vue.delete方法。
Vue.set
此方法有助于在对象上设置属性。它用于解决Vue无法检测到属性添加的限制。
语法
Vue.set( target, key, value )
哪里，
target：可以是对象或数组
key ：可以是字符串或数字
value：可以是任何类型
让我们看一个例子。
例
<html>
<head>
<title>VueJs Instance - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</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，名称和价格，而不适用于qty。
我们不能仅通过添加vue对象来实现反应性。VueJS主要希望在开始时创建其所有属性。但是，如果以后需要添加它，可以使用Vue.set。为此，我们需要使用vue global设置它，即Vue.set。
例
<html>
<head>
<title>VueJs Instance - Web176教程网 | https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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添加的数量的获取/设置。
Vue.delete
此函数用于动态删除属性。
例
Vue.delete( target, key )
target：可以是对象或数组
key：可以是字符串或数字
要删除任何属性，我们可以使用Vue.delete，如以下代码所示。
例
<html>
<head>
<title>VueJs Instance - Web176教程网 | https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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方法已删除。
作者：terry，如若转载，请注明出处：https://www.web176.com/vuejs/983.html
