怎么避免按钮组件闪现-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监听函数的使用,有时会忽略状态的默认值问题,导致走不进监听函数。

相关推荐
吕彬-前端33 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱36 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb