第一次打算在掘金上发表文章,想一想还是从自己最近的一次业务需求上入手,写一个watch监听的使用,小试牛刀。有写的不对的地方,还请各位看官多多指证。
- 先说一说需求是什么:业务侧要求图文标签命中敏感词的时,有一个【关注按钮】不要展示。
- 接到需求后,我想这简单呀,组件上加上v-if解决了。然而效果是有了,但是体验并不好。具体分析原因是,获取标签敏感词是一个异步接口返回的,导致呈现的效果是,拿到敏感词且匹配命中前,【关注按钮】会先展示,敏感词匹配命中后,【关注按钮】才会消失。所以呈现出了【关注按钮】一闪而过的效果,这多少有点影响用户体验呀~~
- 虽然产品小姐姐没有说什么,但是本着让小姐姐一眼满意的想法💡,还是打算再动手优化一下,优化步骤往下看⬇️
- -给关注按钮添加一层父div包裹,父div加上v-show,默认false不展示。
- 当获取标签敏感词且得到匹配结果后,父div v-show=true,展示。
- 优化完成,再看下结果➡️乖乖~ 命中敏感词后,没有闪现,【关注按钮】不展示了,完美。。。
- 等等,作为一名严谨的开发,咱怎么可以只测一条用例呢?必须再测一条!
- 发现标签敏感词未命中后,【关注按钮】也没有展示😭
sql
> - 这问题值得分析一下,父div的v-show值是取的监听,监听【关注按钮】v-if 的值,通过日志打印和页面元素查看,发现v-if 的值变为false后,没有走入监听函数,所以父div的v-show值没有改变,还是false默认值。
既然是 监听函数没有处理,那是不是watch函数的原因呢?来来,我们看看
原来watch监听要有值变化,才会触发监听函数。而【关注按钮】v-if的默认值,我给的是false,改成null后,就好了。这样命中敏感词是true,没有命中敏感词是false,都能走进watch 的监听函数 🥳
ps:文中代码都是简易表述,是针对相关需求做的陈述。主要还是为了说明 watch监听函数的使用,有时会忽略状态的默认值问题,导致走不进监听函数。