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
方法。
此方法有助于在对象上设置属性。它用来绕过vue无法检测属性添加的限制。
语法
vue.set( 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
。
该函数用于动态删除属性。
示例
vue.delete( target, key )
在这里,
参考以下代码 -
<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
方法被删除。