- 简单难度(20%):
一、.什么是CSS盒模型?简要描述它的组成部分。
1.盒模型:就是把HTML页面中的元素看作是以一个矩形的盒子,也就是一个装东西的容器。
2.盒模型包含四部分:内容(content)、内边距也称之为补白和填充区(padding)边框(border)外边距(margin)
二、CSS清除浮动的方法有哪些。
1.使用clearfix:clearfix 是一种使用伪元素的方式,通过在父元素上添加 ::after 伪元素,并设置 clear: both 来清除浮动。
2.使用overflow:在父元素上设置 overflow: hidden 或 overflow: auto,可以使父元素包含浮动元素。
3.使用display:table:在父元素上设置 display: table,可以使父元素包含浮动元素。
4.使用display:flow-root:在父元素上设置 display: flow-root,可以清除浮动。
5.使用flex布局:在父元素上使用flex布局,可以将子元素包含在父元素中。 ::: ::::
三、var,let,const的比较。
1.作用域:var 声明的变量在函数作用域中有效,而 let 和 const 声明的变量在块级作用域中有效,即大括号 {} 中。在块级作用域中声明的变量只在该作用域内有效,在作用域外不可访问。
2.变量提升:使用 var 声明的变量会发生变量提升,即在函数作用域中,变量声明会被提升到函数顶部。而使用 let 和 const 声明的变量不会发生变量提升,只有在变量声明的位置之后才能访问。
3.重复声明:使用 var 声明的变量可以在同一个作用域内重复声明多次,后面的声明会覆盖前面的声明。而使用 let 或 const 声明的变量在同一个作用域内重复声明会报错。
4.赋值:使用 var、let、const 声明的变量都可以重新赋值。但使用 const 声明的变量是常量,不能改变其值的引用,即不能重新赋值。而使用 var 和 let 声明的变量可以重新赋值。 ::: ::::
四、什么是事件冒泡和事件捕获?简要描述它们之间的区别。
1.事件冒泡是从事件目标元素向上冒泡到祖先元素的过程。即事件在目标元素上触发后,会沿着 DOM 树向上传递,一直到根节点为止,期间经过的所有元素都会触发相同的事件。这意味着,如果一个子元素上触发了事件,那么其所有祖先元素都会依次触发同一个事件。
2.事件捕获是从根节点向下捕获到目标元素的过程。即事件从根节点开始,沿着 DOM 树向下传递,直到目标元素为止,期间经过的所有元素都会触发相同的事件。这意味着,如果一个父元素上触发了事件,那么其所有子元素都会依次触发同一个事件。
3.事件冒泡和事件捕获之间的主要区别在于传播方向。事件冒泡是从目标元素向上传递到根节点,而事件捕获是从根节点向下捕获到目标元素。另外,事件冒泡是默认的传播方式,而事件捕获需要通过 addEventListener 方法的第三个参数来指定。
4.在实际开发中,事件冒泡和事件捕获经常被用来实现事件委托和事件处理优化。事件委托可以将事件处理函数绑定到祖先元素上,利用事件冒泡机制实现对后代元素的事件处理;事件处理优化可以根据具体的应用场景选择事件冒泡或事件捕获,避免不必要的事件处理和性能消耗。 ::: ::::
五、JS有哪些数据类型
1.数字(number):表示整数和浮点数,例如 42、3.14 等。
2.字符串(string):表示文本,例如 “hello world”、‘JavaScript’ 等。
3.布尔值(boolean):表示真或假,即 true 或 false。
4.空值(null):表示空或不存在的值,可以使用 null 来显式地赋值。
5.未定义(undefined):表示变量未定义或对象属性不存在,例如未初始化的变量或未赋值的属性。
6.符号(symbol):表示唯一的标识符,用于对象属性的键值或作为隐藏属性等。
7.大整数(bigint):表示任意精度整数,可以使用 n 结尾的数字字面量来定义。
此外,JavaScript 还有一种复杂数据类型,即对象(object)。对象可以包含任意数量和类型的属性,包括基本类型和其他对象类型。对象可以通过字面量、构造函数或对象字面量语法来创建。
- 中等难度(60%):
一、Vue中v-if和v-show的区别。
1.编译时刻不同:v-if 在编译时会将元素添加或移除 DOM,而 v-show 则会将元素的 display 属性设置为 none。
2.初始渲染时不同:v-if 在初始渲染时如果条件为 false,则元素不会被渲染到 DOM 中,而 v-show 在初始渲染时始终会渲染到 DOM 中。
3.更新时渲染方式不同:v-if 在条件切换时会重新渲染元素,而 v-show 切换时只会修改元素的 display 属性。
综上所述,当需要频繁切换元素的显示和隐藏时,建议使用 v-show;而当条件较少变化时,建议使用 v-if,以避免不必要的 DOM 渲染开销。 ::: ::::
二、Vue中Computed和Watch的区别。
1.实现方式不同:computed 是一个计算属性,通过函数的方式返回一个计算结果,只有在依赖的数据发生变化时才会重新计算,而 watch 则是一个观察者,通过监听数据变化来执行相应的操作。
2.使用场景不同:computed 适用于根据已有数据计算出新的值的场景,例如将商品价格转换为带有货币符号的格式,或者根据多个输入框的值计算出一个总价等。而 watch 则适用于监听某个特定数据的变化并执行相应的操作,例如在数据变化时发起一个 API 请求,或者在路由变化时更新页面的标题等。
3.能否监听对象和数组的变化不同:computed 可以监听对象和数组的变化,但需要使用深度监听或者自定义 setter 来实现。而 watch 可以监听对象和数组的变化,并提供了一些可选的配置项,例如 immediate 和 deep 等。
综上所述,computed 和 watch 都有各自的优缺点和适用场景,需要根据具体的业务需求来选择使用哪种方式来监听数据变化。 ::: ::::
三、浏览器中回流和重绘的区别。
1.回流(reflow)是指当页面中的元素位置、大小等发生变化时,浏览器需要重新计算页面布局并重新绘制页面的过程。回流的成本很高,因为它会触发整个页面的重新渲染,并且会导致其他元素的位置和大小发生变化。
- 回流的触发方式包括以下几种:
1.添加、删除、修改页面元素的内容 修改页面元素的