分享更有价值
被信任是一种快乐

vue的watch属性怎么使用

文章页正文上

这篇文章主要介绍“vue的watch属性怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue的watch属性怎么使用”文章能帮助大家解决问题。 watch是监视属性。在vue中,可以通过watch属性来监视某个属性的变化,当这个属性发生变化时,可以执行一些操作:1、当监视属性所监视的属性发生变化的时候,回调函数就会自动调用,并且执行相关的操作;2、监视属性所监视的属性要存在,才能产生作用。监视属性有两种写法“new Vue({watch:{}})”和“vue实例化对象.$watch(‘属性名’回调函数)”。在开发中,我们会遇到这样一种情况,我们需要一个属性变化的时候,然后做出一些操作。而检测这个变化的属性,在vue中叫做监视属性。1.监视属性是什么在vue中,我们可以通过watch属性来监视某个属性的变化,当这个属性发生变化时,我们可以执行一些操作。当监视属性所监视的属性发生变化的时候,回调函数(handler)就会自动调用,并且执行相关的操作监视属性所监视的属性要存在,才能产生作用。我们这里用一个天气案例来解释什么是监视属性:首先html代码:

今天天气很{{info}}

今天天气很{{info}}接下来我们书写js代码:

varvm=newVue({
el:"#app",
data:{
isHot:true,
},
computed:{
info:function(){
returnthis.isHot?"热":"冷";
}
},
methods:{
change:function(){
this.isHot=!this.isHot;
}
},
watch:{
isHot:{
handler:function(newVal,oldVal){
console.log("isHot属性发生了变化");
},
}
}
});

在代码里面的handler这个函数就是我们前面说的回调函数,当isHot属性发生变化的时候,这个函数就会自动调用。当然我们可以在idHot对象面添加一个属性:immediate,当此属性布尔值为真的时候,handler回调函数在初始化的时候就会调用一次。

watch:{
isHot:{
handler:function(newVal,oldVal){
console.log("isHot属性发生了变化");
},
immediate:true
}
}

2.监视属性的写法监视属性有两种写法:在vue实例化对象中直接书写:
new Vue({watch:{}}),然后传入相关配置通过vue实例化对象.$watch('属性名',回调函数)来书写这里的第一种写法上面我们已经展现过了,下面我们就展示一下第二种写法:这里我们假设vue的实例化对象为vm。

vm.$watch('isHot',function(newVal,oldVal){
console.log("isHot属性发生了变化");
});

3.监视属性之深度监视前面免费云主机、域名我们实现的监视,只能监视vue实例data中直接的简单数据,要是遇到对象或者数组,就无法监视了。这样做的方法是vue为了提高效率,在vue监视属性中,默认只监视一层,如果要监视多层,就需要我们手动开启深度监视。

watch:{
isHot:{
handler:function(newVal,oldVal){
console.log("isHot属性发生了变化");
},
immediate:true,
deep:true
}
}

其中deep:true就开启了深度监视。
深度监视就是监视vue中data中的对象或者数组,当对象或者数组中的属性发生变化的时候,监视属性的回调函数就会自动调用。在vue中其实是可以检测对象内部值的变化,那为什么vue监视属性不默认开启深度监视呢?因为vue监视属性的回调函数是在数据发生变化的时候才会调用,如果开启深度监视,那么vue就要监视对象内部的所有属性,这样会大大降低vue的效率。在我们使用监视属性的时候,我们根据具体的业务需求,来判断要不要开启深度监视。关于“vue的watch属性怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: JavaScript中的this指向问题怎么解决

这篇文章主要介绍了一文搞懂JavaScript中的this指向问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇一文搞懂JavaScript中的this指向问题文章都会有所收获,下面我们一起来看看吧。在js中,this的意思为“这…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册