怎么避免按钮组件闪现-watch监听实践

第一次打算在掘金上发表文章，想一想还是从自己最近的一次业务需求上入手，写一个watch监听的使用，小试牛刀。有写的不对的地方，还请各位看官多多指证。

先说一说需求是什么：业务侧要求图文标签命中敏感词的时，有一个【关注按钮】不要展示。
接到需求后，我想这简单呀，组件上加上v-if解决了。然而效果是有了，但是体验并不好。具体分析原因是，获取标签敏感词是一个异步接口返回的，导致呈现的效果是，拿到敏感词且匹配命中前，【关注按钮】会先展示，敏感词匹配命中后，【关注按钮】才会消失。所以呈现出了【关注按钮】一闪而过的效果，这多少有点影响用户体验呀～～
虽然产品小姐姐没有说什么，但是本着让小姐姐一眼满意的想法💡，还是打算再动手优化一下，优化步骤往下看⬇️

sql 复制代码

> - 这问题值得分析一下，父div的v-show值是取的监听，监听【关注按钮】v-if 的值，通过日志打印和页面元素查看，发现v-if 的值变为false后，没有走入监听函数，所以父div的v-show值没有改变，还是false默认值。

既然是监听函数没有处理，那是不是watch函数的原因呢？来来，我们看看

原来watch监听要有值变化，才会触发监听函数。而【关注按钮】v-if的默认值，我给的是false，改成null后，就好了。这样命中敏感词是true,没有命中敏感词是false，都能走进watch 的监听函数 🥳

ps:文中代码都是简易表述，是针对相关需求做的陈述。主要还是为了说明 watch监听函数的使用，有时会忽略状态的默认值问题，导致走不进监听函数。