Vue项目wach对象或者数组
Vue.js的watch默认情况下不能检测到对象的属性或者数组的元素的改变。因此就有了几种方法用于watch,推荐第二种:第一种:优点:可以检测到对象和数组的所有元素变动缺点:当数据较大时,性能开销大//遍历数组watch:{param:{handler(){//每当param中的属性/元素发生变化,遍历param//do something},de...
·
Vue.js的watch默认情况下不能检测到对象的属性或者数组的元素的改变。因此就有了几种方法用于watch,推荐第二种:
第一种:
优点:可以检测到对象和数组的所有元素变动
缺点:当数据较大时,性能开销大
//遍历数组
watch:{
param:{
handler(){
//每当param中的属性/元素发生变化,遍历param
//do something
},
deep:true
}
}
//检测指定对象属性
watch:{
'param.name':{
handler(name)(){
//监视name属性
},
//可加可不加
deep:true
}
}
第二种:
通过vue提供的Vue.set(obj , key , value)触发watch监视的动作。
首先解决数据与DOM树绑定,Vue提供计算属性的get、set方法。其次就是触发watch。
//例:绑定select
<select v-model="dateChange">
<option value="a">A</option>
<option value="b">B</option>
</select>
//vue代码
···
data:function(){
return {
data:{"selectValue":"a"}
}
},
computed:{
dateChange:{
get:function(){
return this.data.selectValue;
},
set:function(value){
this.$set(this.data , "selectValue" , value)
}
}
},
watch:{
'data.selectValue'(){
//do something
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)