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

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

  • 先说一说需求是什么:业务侧要求图文标签命中敏感词的时,有一个【关注按钮】不要展示。
  • 接到需求后,我想这简单呀,组件上加上v-if解决了。然而效果是有了,但是体验并不好。具体分析原因是,获取标签敏感词是一个异步接口返回的,导致呈现的效果是,拿到敏感词且匹配命中前,【关注按钮】会先展示,敏感词匹配命中后,【关注按钮】才会消失。所以呈现出了【关注按钮】一闪而过的效果,这多少有点影响用户体验呀~~
  • 虽然产品小姐姐没有说什么,但是本着让小姐姐一眼满意的想法💡,还是打算再动手优化一下,优化步骤往下看⬇️
  1. -给关注按钮添加一层父div包裹,父div加上v-show,默认false不展示。
  2. 当获取标签敏感词且得到匹配结果后,父div v-show=true,展示。
  3. 优化完成,再看下结果➡️乖乖~ 命中敏感词后,没有闪现,【关注按钮】不展示了,完美。。。
  4. 等等,作为一名严谨的开发,咱怎么可以只测一条用例呢?必须再测一条!
  5. 发现标签敏感词未命中后,【关注按钮】也没有展示😭
sql 复制代码
> - 这问题值得分析一下,父div的v-show值是取的监听,监听【关注按钮】v-if 的值,通过日志打印和页面元素查看,发现v-if 的值变为false后,没有走入监听函数,所以父div的v-show值没有改变,还是false默认值。

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

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

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

相关推荐
悦涵仙子16 分钟前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树16 分钟前
分布式在线评测系统
前端·c++·后端·负载均衡
haima9543 分钟前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐1 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲1 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲1 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人1 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站1 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
理想不理想v1 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js
fhf1 小时前
感觉根本等不到35岁AI就把我裁了
前端·人工智能·程序员