sau交流学习社区—vue总结:使用vue的computed属性实现监控变量变化,使用vue的watch属性监控变量变化从而实现其他业务
2018-11-29 21:22
841 查看
有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口。
同步sau交流学习社区:https://www.mwcxs.top/page/464.html
一、使用computed属性的实时监控计算
我第一反应是做一个computed属性监控这个输入框的值,一旦监控发现值为空,我就重新执行一遍请求的方法。
<el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4"> <el-input v-model="searchContent" placeholder="请输入相关内容"></el-input> </el-col> <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4"> <el-button @click="search()" type="primary">搜索</el-button> </el-col>
data () { return { searchContent: '' } },
computed: { searchContent: function () { if(!this.searchContent){ this.getEventCategories(); } } },
查找资料发现:1、计算属性也是属性,把他当做普通属性,所以你在computed中定义searchContent属性,在data中再次定义searchContent就会爆出重复定义的问题。
当我在data中不定义searchContent时候,
发现超出了浏览器栈最大的允许的大小,说明什么呢,就是说,你陷入了无限循环,栈溢出了,发现就是计算属性里有计算属性本身,循环计算这个属性。
这时候自己才想起来,2、computed属性就是一个普通属性,唯一区别不同的地方就是:computed属性里的function里的任何数据发生变化都会触发这个属性值的计算。
二、使用watch方法来实现检测值的变化并且需要调用其他方法
最后自己只能使用watch方法来实现这个功能
watch: { "searchContent": function () { if(!this.searchContent){ this.getEventCategories(); } } },
这个时候在data里还是需要定义searchContent这个变量,意思就是说,检测searchContent的值变化,一旦发现这个值为空的时候就调用method的方法getEventCategories()。否则就不会调用这个方法。
最后上一张动态图
三、总结
1、computed属性的结果会被缓存,依赖的属性如果发生变化才会重新计算,把他当做普通属性来使用;
2、watch属性,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以把他看作是computed和methods的结合体;
3、methods方法表示一个具体的操作,主要书写业务逻辑;
相关文章推荐
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- sau交流学习社区第三方登陆github--oauth来实现用户登录
- Vue.js学习(二):computed响应数据变化与其他几种方法的比较
- sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数
- PHP学习 变量使用总结
- 类别,属性,成员变量,arc学习总结
- vue 使用Slot 分发内容 学习总结。
- Extjs学习总结之12使用ComboBox实现分页
- OC 学习第十天_⼀、属性的内部实现原理 ⼆、dealloc内释放实例变量 三、便利构造器⽅法的实现原理
- Grafana4.0使用Zabbix&CloudWatch数据源实现监控
- vue的computed计算属性学习
- 不使用其他变量实现字符串倒序拷贝
- 类别,属性,成员变量,arc学习总结
- Struts学习总结(五)---使用Struts2实现单个文件上传
- MVC使用T4模板生成其他类的具体实现学习笔记2
- vue教程2-03 vue计算属性的使用 computed
- vue2.0使用watch监听对象属性
- Vue 2.0学习笔记之Vue中的computed属性
- Vue.js第三天学习笔记(计算属性computed)
- 转:类别,属性,成员变量,arc学习总结