popring's Blog

探索、记录、分享

发表于 分类于

v-if

根据表达式的真假值来决定是否渲染，它会造成真实DOM元素的渲染和销毁。

v-show

根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果。

v-if 和 v-show 区别

  • v-if 会 “真正” 条件的渲染，它要确定事件监听器和子组件的正确创建和销毁（切换自组件会经历生命周期函数）
  • v-if 如果初始条件为假，则不会渲染，只有当值为真是才会进行渲染
  • v-show 无论在什么条件下都会进行渲染 DOM 元素，只是简单的切换 css 样式，来进行视觉上的显示和隐藏。
  • v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果元素频繁的切换，建议使用 v-show ；如果运行后条件很少改变，则使用 v-if
  • v-if 切换会造成回流和重绘，v-show 则会造成重绘。

关联文章：

visibility: hidden、display: none、opacity: 0 区别

发表于 分类于

结论

做了以下的实验，可以得出结论，

  • visibility: hidden; 只是在视觉上隐藏，但没有影响布局，但绑定的事件也无法触发。
  • display:none; 元素被彻底隐藏，在页面上完全不显示，不占位，无宽高
  • opacity: 0; 只会修改元素透明度，并不影响布局及事件触发。
阅读全文 »

发表于 分类于

问题描述

当前端使用 ajax 提交一个表单时，因网络缓慢等原因导致数据没有及时返回数据，导致用户没有得到正确的提示，以为未点中提交按钮，进而在此点击提交按钮，进行提交数据（多半会重复多次点击）

解决方法

  • 禁用按钮，并添加 loading 提示
  • 移除点击事件
  • 结合vue使用
阅读全文 »

发表于

软实力

职场效率法则

如何做一个有质量的技术分享

监控

迄今为止最全的前端监控体系搭建篇(长文预警)

前端性能监控（一）指标收集

设计模式

https://www.patterns.dev/

写作

Google 技术写作

提问

提问的智慧

性能优化

页面渲染大量数据的性能优化（时间分片），这篇文章对我影响很大

面试题

系统设计面试题精选

彻底击碎行为问题

发表于 分类于
  • CSS模型
    • 标准盒模型和IE盒模型
    • 设置两种模型
    • 获取盒模型的宽高
    • BFC
  • DOM事件类
    • DOM事件级别
    • DOM事件模型
    • 事件 捕获/冒泡 流程
    • Event 事件
  • 原型链类
    • 创建对象的几种方法
    • 原型、构造函数、原型链、实例关系
    • instanceof 原理
    • new 运算符
    • 模拟 new
阅读全文 »