前端面试题

目录

1.说一说CSS尺寸设置的单位

2.说一下浮动？

3.盒子模型

4. HTML5语义化标签

 5.vue中父子组件的传值

父传子（通过props）父组件通过props向子组件传递数据。

子传父（通过自定义事件）子组件通过触发自定义事件向父组件传递数据。

6.vue2和vue3的区别

---

• 1.说一说CSS尺寸设置的单位

①共有五个单位，分别是px，em，rem，vw，vh。
②除了px是绝对单位，其余都是相对单位。 ③em相对于他本身的字体大小（但他本身字体大小是相对于父级字体大小的）。
④rem相对于根元素的字体大小。
⑤vw相对于可视化窗口的宽（1vw就是1%窗口宽度）。
⑥vh相对于可视化窗口的高（1vh就是1%窗口高度）。
⑦一般采用rem＋媒体查询或者rem＋vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或vw改变根元素的字体大小，从而改变以rem为单位的元素大小。

• 2.说一下浮动？

脱离标准流，浮动子盒子不占位置，父元素盒子塌陷，影响后面元素的排版
设置浮动的图片，可以实现文字环绕图片，
设置了浮动的块级元素可以排列在同一行，
设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。
清除浮动三种方法
w3c，额外标签法，在浮动元素后面加一个空标签，样式clear:both
给父元素加overflow:hidden
给父元素加伪元素.clearfix::after { content: ''; display: table; clear: both; }

• 3.盒子模型

得分点 标准盒模型、怪异盒模型、`box-sizing:border-box`、盒模型大小 标准回答 CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。 标准模型，给盒设置 `width` 和 `height`，实际设置的是 content box。`padding` 和 `border `再加上设置的宽高一起决定整个盒子的大小。 怪异盒模型，给盒设置 `width` 和 `height`，包含了`padding`和`border `，设置的 `width` 和 `heigt.

• 4. HTML5语义化标签

HTML5还引入了许多新的语义化标签，用于更好地描述网页内容的结构和含义，如<article>、<section>、<nav>、<header>、<footer>等。这些标签不仅有助于改善网页的可读性和可维护性，还有助于搜索引擎优化（SEO）。
在HTML5中，网页的常见结构标签用于组织和定义网页的不同部分，以提高文档的可读性和可维护性，同时也增强了网页的语义化。

•  5.vue中父子组件的传值

父传子（通过props）
父组件通过props向子组件传递数据。

父组件：

<template>  
  <div>  
    <ChildComponent :parentData="parentData" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentData: '这是来自父组件的数据'  
    }  
  }  
}  
</script>

子组件（ChildComponent.vue）：

<template>  
  <div>{{ parentData }}</div>  
</template>  
  
<script>  
export default {  
  props: ['parentData']  
}  
</script>

在这个例子中，父组件通过:parentData="parentData"（这里的冒号是v-bind的简写，用于绑定属性）将parentData这个数据传递给子组件，子组件通过props接收这个数据，并展示在模板中。

子传父（通过自定义事件）
子组件通过触发自定义事件向父组件传递数据。

子组件（ChildComponent.vue）：

<template>  
  <button @click="sendDataToParent">向父组件发送数据</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    sendDataToParent() {  
      // 假设我们要发送的数据是'childData'  
      this.$emit('update:parentData', 'childData');  
    }  
  }  
}  
</script>

父组件：

<template>  
  <div>  
    <ChildComponent @update:parentData="handleChildData" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleChildData(data) {  
      console.log('来自子组件的数据：', data);  
      // 可以在这里处理来自子组件的数据  
    }  
  }  
}  
</script>

子组件通过this.$emit('update:parentData', 'childData')触发了一个名为update:parentData的自定义事件，并传递了'childData'作为参数。父组件通过监听这个自定义事件（@update:parentData="handleChildData"），并在对应的方法handleChildData中接收并处理来自子组件的数据。

6.vue2和vue3的区别

1. 双向数据绑定原理
Vue 2：使用ES5的Object.defineProperty()方法来实现数据的响应式。这种方法只能监听对象属性的setter和getter，对于数组需要特殊处理才能监听其变化。
Vue 3：采用ES6的Proxy对象来代理整个数据对象，从而实现对数据变化的监听。这种方式更加高效，能够直接监听对象和数组的内部变化，无需像Vue 2那样进行特殊处理。
2. 组件API
Vue 2：使用选项式API（Options API），将组件的选项分割成data、computed、methods等。这种方式在组件较大时，可能会导致代码结构变得复杂和难以维护。
Vue 3：引入了组合式API（Composition API），通过setup()函数来组织组件的逻辑。这种方式允许将组件的逻辑拆分成更小的、可复用的函数（称为composables），从而提高了代码的可维护性和复用性。
3. 生命周期钩子
Vue 2：生命周期钩子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated等。
Vue 3：生命周期钩子有所变化，如beforeCreate和created被setup()函数替代（该函数在beforeCreate和created之间执行），其他钩子如beforeMount、mounted等需要通过on前缀来引入（如onBeforeMount、onMounted）。此外，Vue 3还增加了onRenderTracked和onRenderTriggered两个调试钩子。
4. 模板和指令
Vue 2：在模板中直接使用slot，v-for和v-if的优先级是v-for高于v-if，且不建议一起使用。
Vue 3：必须使用v-slot的形式来定义插槽，v-for和v-if的优先级变为v-if高于v-for，且可以一起使用（但需要注意避免性能问题）。此外，Vue 3移除了keyCode作为v-on的修饰符，也不支持config.keyCodes和v-on.native修饰符。
5. 性能和优化
Vue 3：通过改进虚拟DOM的算法和底层架构，实现了更快的渲染速度和更低的内存使用率。这意味着在处理大量数据或复杂组件时，Vue 3能够提供更流畅的用户体验。
6. TypeScript支持
Vue 3：完全支持TypeScript，这有助于在开发过程中提供类型检查和更好的代码提示，从而提高项目的可维护性。Vue 2虽然也支持TypeScript，但支持程度有限。
7. 碎片化（Fragments）
Vue 2：在模板中只允许存在一个根节点。
Vue 3：支持碎片化（Fragments），即模板中可以拥有多个根节点。这通过创建一个虚拟的Fragment节点来实现。
8. 其他新特性
Vue 3：新增了Teleport传送门组件和Suspense组件等，为开发者提供了更多的灵活性和功能。