前端小知识随手记

HTML

CSS

前端常见的数值单位

  • px:绝对单位,页面按精确像素展示。
  • em:相对单位,按自身的font-size计算
  • rem:相对单位,相对根节点的字体大小来计算
  • vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
  • vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
  • vmin:vw和vh中较小的那个。
  • vmax:vw和vh中较大的那个。
  • %:百分比

display: none, visibility: hidden, opacity: 0的区别

在DOM树中的处理 是否占据空间 是否可以点击 性能 对后代的影响
display: none 从树中移除 不占空间 不能 触发回流 全部不能显示
visibility: hidden 不从树中移除 占据空间 不能 触发重绘 可以设置visibility为visible来显示
opacity: 0 不从树中移除 占据空间 可以 触发GPU硬件加速 全部不能显示

回流和重绘

css居中总结

https://www.sakura-snow.com/archives/615

JavaScript

let和Var的区别

  • let是块作用域,var是函数作用域
  • let不会挂载到全局对象上
  • 不允许在当前作用域内重复声明,不允许在定义前调用

底层实现上,let声明的变量实际上也会有提升,但是,提升后会将其放入到“暂时性死区”,如果访问的变量位于暂时性死区,则会报错:“Cannot access 'a' before initialization”。当代码运行到该变量的声明语句时,会将其从暂时性死区中移除。

在循环中,用let声明的循环变量,会特殊处理,每次进入循环体,都会开启一个新的作用域,并且将循环变量绑定到该作用域(每次循环,使用的是一个全新的循环变量)

在循环中使用let声明的循环变量,在循环结束后会销毁

箭头函数和普通函数的区别

  • 箭头函数的this永远指向定义时外层环境的this
  • 箭头函数不能作为构造函数
  • 箭头函数没有arguments参数
  • 箭头函数没有prototype
  • 箭头函数不能用作Generator函数

Vue

Vue生命周期

生命周期钩子 组件状态 最佳实践
beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据 常用于初始化非响应式变量
created 实例创建完成,可访问data、props、computed、watch、methods上的方法和数据,provide和inject的数据也可以进行访问,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组 常用于简单的ajax请求,页面的初始化
beforeMount 在挂载开始之前被调用
mounted 实例挂载到DOM上,此时可以访问$el, $ref属性 常用于需要DOM参与的操作和ajax请求
beforeupdate 响应式数据更新时调用,发生在准备更新DOM前 适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器
updated 虚拟DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作 避免在这个钩子函数中操作数据,可能陷入死循环
beforeDestroy 实例销毁之前调用。这一步,实例仍然完全可用,this仍能获取到实例 常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed 实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 -

React

webpack

其他

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00