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

有时候遇到这么个需求，输入框为空的时候，请求一遍接口，如果输入框不为空的时候，需要点击搜索按钮请求接口。
同步sau交流学习社区：
一、使用属性的实时监控计算
我第一反应是做一个属性监控这个输入框的值，一旦监控发现值为空，我就重新执行一遍请求的方法。
搜索

data () {return {searchContent: ''}},

computed: {searchContent: function () {if(!this.searchContent){this.getEventCategories();}}},

文章插图

查找资料发现：1、计算属性也是属性，把他当做普通属性，所以你在中定义属性，在data中再次定义就会爆出重复定义的问题。
当我在data中不定义时候，
发现超出了浏览器栈最大的允许的大小，说明什么呢，就是说，你陷入了无限循环，栈溢出了，发现就是计算属性里有计算属性本身，循环计算这个属性。
这时候自己才想起来，2、属性就是一个普通属性，唯一区别不同的地方就是：属性里的里的任何数据发生变化都会触发这个属性值的计算。
二、使用watch方法来实现检测值的变化并且需要调用其他方法
最后自己只能使用watch方法来实现这个功能
watch: {"searchContent": function () {if(!this.searchContent){this.getEventCategories();}}},
这个时候在data里还是需要定义这个变量，意思就是说，检测的值变化，一旦发现这个值为空的时候就调用的方法() 。否则就不会调用这个方法。
最后上一张动态图
三、总结
1、属性的结果会被缓存，依赖的属性如果发生变化才会重新计算，把他当做普通属性来使用；
2、watch属性，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以把他看作是和的结合体；
【sau交流学习社区—vue总结：使用vue的computed属性实现监控变量变化】3、方法表示一个具体的操作，主要书写业务逻辑；