第一次打算在掘金上发表文章，想一想还是从自己最近的一次业务需求上入手，写一个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监听函数的使用，有时会忽略状态的默认值问题，导致走不进监听函数。