加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

sau交流学习社区—vue总结:使用vue的computed属性实现监控变量

发布时间:2020-12-16 23:17:34 所属栏目:百科 来源:网络整理
导读:有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口。 同步sau交流学习社区: 一、使用computed属性的实时监控计算 我第一反应是做一个computed属性监控这个输入框的值,一旦监控发现值为空,我就重

有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口。

同步sau交流学习社区:

一、使用computed属性的实时监控计算

我第一反应是做一个computed属性监控这个输入框的值,一旦监控发现值为空,我就重新执行一遍请求的方法。


''
(!

查找资料发现:1、计算属性也是属性,把他当做普通属性,所以你在computed中定义searchContent属性,在data中再次定义searchContent就会爆出重复定义的问题。

当我在data中不定义searchContent时候,

发现超出了浏览器栈最大的允许的大小,说明什么呢,就是说,你陷入了无限循环,栈溢出了,发现就是计算属性里有计算属性本身,循环计算这个属性。

这时候自己才想起来,2、computed属性就是一个普通属性,唯一区别不同的地方就是:computed属性里的function里的任何数据发生变化都会触发这个属性值的计算。

?

二、使用watch方法来实现检测值的变化并且需要调用其他方法

最后自己只能使用watch方法来实现这个功能

"searchContent": (!

这个时候在data里还是需要定义searchContent这个变量,意思就是说,检测searchContent的值变化,一旦发现这个值为空的时候就调用method的方法getEventCategories()。否则就不会调用这个方法。

最后上一张动态图

?

三、总结

1、computed属性的结果会被缓存,依赖的属性如果发生变化才会重新计算,把他当做普通属性来使用;

2、watch属性,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以把他看作是computed和methods的结合体;

3、methods方法表示一个具体的操作,主要书写业务逻辑;

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读