百度前端实习一面（深圳）

一面较简单，都是八股
自我介绍

1.css的flex布局

CSS的Flex布局是一种灵活的盒子模型，它使得容器内的元素能够自动调整大小和位置以适应不同的屏幕尺寸和设备。Flex布局的主要属性包括以下几种：

1. flex-direction：设置主轴方向，可以是row（水平方向）、row-reverse（水平方向，从右到左）、column（垂直方向）、column-reverse（垂直方向，从下到上）。

2. flex-wrap：设置是否允许换行，可以是nowrap（不换行）、wrap（换行）、wrap-reverse（换行，从下到上）。

3. flex-flow：flex-direction和flex-wrap的简写属性。

4. justify-content：设置主轴上的对齐方式，可以是flex-start（起始位置对齐）、flex-end（末尾位置对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（每个项目两侧的间隔相等）。

5. align-items：设置交叉轴上的对齐方式，可以是flex-start（起始位置对齐）、flex-end（末尾位置对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐，项目占满整个交叉轴）。

6. align-content：设置多根轴线的对齐方式，只有一根轴线时无效，可以是flex-start、flex-end、center、space-between、space-around、stretch。

2.css的其他布局

除了Flex布局之外，CSS还有其他常见的布局方式，包括：

1. Float布局：通过float属性使元素浮动到指定的方向，用于实现文本环绕图片等效果。

2. Position布局：通过position属性设置元素的定位方式，包括static（默认定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）等。

3. Grid布局：CSS的网格布局，通过grid属性设置容器的网格布局，可以定义行和列的大小和位置。

4. Table布局：通过display: table等属性模拟表格布局，将元素以表格的形式进行布局。

5. Multi-column布局：通过column-count、column-width等属性将内容分成多列进行布局。

每种布局方式都有其特点和适用场景，根据实际需求选择合适的布局方式进行页面设计。

3.css选择器及其权重

CSS选择器用于选择HTML元素，并且可以通过不同的方式指定元素的样式。CSS选择器根据其特定性和位置不同，具有不同的权重。下面是常见的CSS选择器及其权重：

1. 元素选择器：

   • 权重：1
   • 例如：div, p, span等

2. 类选择器：

   • 权重：10
   • 例如：.classname

3. ID选择器：

   • 权重：100
   • 例如：#idname

4. 伪类选择器：

   • 权重：特殊情况下
   • 例如：:hover, :active, :focus等

5. 属性选择器：

   • 权重：特殊情况下
   • 例如：[type="text"], [href="#"]等

6. 组合选择器：

   • 权重：根据组合方式计算
   • 例如：div p, ul li, .classA .classB等

在样式的应用中，如果多个选择器作用于同一个元素，并且具有不同的权重，则权重高的样式会覆盖权重低的样式。通常来说，权重越高的选择器样式越具有优先权。例如，ID选择器的权重高于类选择器和元素选择器，因此ID选择器定义的样式会覆盖类选择器和元素选择器定义的样式。

在CSS中，如果具有相同的选择器权重，则后定义的样式会覆盖先定义的样式。此外，如果使用了!important标志，它会使样式具有最高的优先级，即使有更高权重的样式也会被覆盖。因此，在实际开发中，应尽量避免使用!important，以免造成样式混乱和难以维护。

4.js异步Promiase

5.ES6新特性，主要数组方法的使用以及区别

ES6（ECMAScript 2015）引入了许多新的特性，其中包括一些强大的数组方法。下面是一些主要的数组方法以及它们的用法和区别：

1. forEach()：

   • 用法：对数组中的每个元素执行提供的函数。
   • 区别：没有返回值，主要用于遍历数组元素执行操作。

2. map()：

   • 用法：对数组中的每个元素执行提供的函数，并返回一个新数组，新数组的元素是原始数组元素执行函数后的结果。
   • 区别：返回一个新数组，不修改原始数组。

3. filter()：

   • 用法：对数组中的每个元素执行提供的函数，并返回一个新数组，新数组包含使函数返回 true 的元素。
   • 区别：返回一个新数组，包含满足条件的元素。

4. reduce()：

   • 用法：对数组中的每个元素执行提供的函数，将结果汇总为单个值。
   • 区别：可以用于计算数组元素之和、平均值等，最终返回一个值。

5. find()：

   • 用法：返回数组中满足提供的测试函数的第一个元素的值，如果没有满足条件的元素，则返回 undefined。
   • 区别：只返回第一个满足条件的元素值。

6. findIndex()：

   • 用法：返回数组中满足提供的测试函数的第一个元素的索引，如果没有满足条件的元素，则返回 -1。
   • 区别：返回第一个满足条件的元素索引。

7. some()：

   • 用法：测试数组中的至少一个元素是否通过了提供的函数的测试。
   • 区别：返回一个布尔值，表示是否至少有一个元素满足条件。

8. every()：

   • 用法：测试数组中的所有元素是否通过了提供的函数的测试。
   • 区别：返回一个布尔值，表示数组中的所有元素是否都满足条件。

9. includes()：

   • 用法：判断数组中是否包含指定元素，返回布尔值。
   • 区别：不同于 indexOf()，includes() 更加直观，不需要额外处理返回值是否为 -1。

这些数组方法在处理数组时非常有用，可以简化代码，提高开发效率。

6.this关键字

7.vue3的computed

在 Vue 3 中，计算属性（computed）的用法与 Vue 2 中基本相同，但是在语法上有一些微小的改变。计算属性依赖于响应式数据，并且会根据其依赖的数据动态计算出一个新的值，当依赖数据发生变化时，计算属性会重新计算值。

在 Vue 3 中，你可以使用 computed 函数来定义计算属性，而不再需要将计算属性定义在 computed 选项中。这样做的好处是，可以更方便地在组件的 setup 函数中使用计算属性。

以下是一个示例，演示了在 Vue 3 中如何使用计算属性：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 定义计算属性
    const doubledCount = computed(() => count.value * 2);

    // 点击按钮时增加 count 的值
    function increment() {
      count.value++;
    }

    // 返回响应式数据和方法
    return {
      count,
      doubledCount,
      increment
    };
  }
};
</script>

在这个示例中，我们使用 computed 函数创建了一个名为 doubledCount 的计算属性，它会动态地将 count 的值乘以 2。当 count 的值发生变化时，doubledCount 会自动更新。

8.Vue3的钩子及其用法

Vue 3 中的钩子函数主要包括生命周期钩子和组件内置钩子。以下是 Vue 3 中常用的钩子函数及其用法：

1. 生命周期钩子：
   • onBeforeMount: 在挂载之前调用。
   • onMounted: 在挂载之后调用。
   • onBeforeUpdate: 在更新之前调用。
   • onUpdated: 在更新之后调用。
   • onBeforeUnmount: 在卸载之前调用。
   • onUnmounted: 在卸载之后调用。
   • onErrorCaptured: 捕获子组件错误。
   • onRenderTracked: 当响应式依赖被追踪时调用。
   • onRenderTriggered: 当响应式依赖触发更新时调用。

示例：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      // 返回数据和方法
    };
  }
};

2. 组件内置钩子：
   • setup: 用于设置组件的初始状态，包括响应式数据、计算属性和事件处理函数等。
   • data: 定义组件的数据，返回一个对象或函数。
   • computed: 定义计算属性，返回一个对象。
   • methods: 定义组件的方法，返回一个对象。
   • watch: 监听数据的变化，可以监听响应式数据、计算属性等。

示例：

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const doubleCount = computed(() => state.count * 2);

    function increment() {
      state.count++;
    }

    return {
      state,
      doubleCount,
      increment
    };
  }
};

这些钩子函数可以在组件的 setup 函数中使用，用于设置组件的初始状态、处理生命周期等。

9.ref和reactive区别

在Vue 3中，ref 和 reactive 是用于创建响应式数据的两种方式，它们之间有以下区别：

1. ref:
   • ref 用于创建一个包装后的响应式引用。它接收一个初始值作为参数，并返回一个包装后的响应式对象。
   • ref 返回的对象具有 .value 属性，通过这个属性来访问和修改引用的值。
   • 通常用于处理基本数据类型，如数字、字符串等。
   • 适用于简单的场景，比如单个数据的响应式处理。

示例：

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 访问值
count.value++; // 修改值

2. reactive:
   • reactive 用于创建一个包含多个响应式属性的对象。它接收一个普通对象作为参数，并返回一个响应式代理对象。
   • reactive 返回的对象的所有属性都是响应式的，即当属性值发生变化时，相关的视图会自动更新。
   • 通常用于处理复杂的对象或数组，比如组件中的数据模型。
   • 适用于包含多个属性或嵌套结构的数据。

示例：

import { reactive } from 'vue';

const state = reactive({
  name: 'John',
  age: 30
});

console.log(state.name); // 访问属性
state.age++; // 修改属性

总结：

• ref 适用于简单的数据类型，返回一个包装后的引用。
• reactive 适用于复杂的对象或数组，返回一个包含多个响应式属性的对象。

10.watch用法以及watch中使用ref和reactive的区别

在 Vue 3 中，ref 和 reactive 是用于处理响应式数据的两种不同方式，它们之间有以下区别：

1. ref:
   • ref 用于创建一个响应式数据的引用。它接收一个初始值作为参数，并返回一个包装后的响应式对象。
   • ref 返回的对象具有 .value 属性，通过这个属性来访问和修改引用的值。
   • 通常用于处理基本数据类型，如数字、字符串等。
   • 适用于简单的场景，比如单个数据的响应式处理。

示例：

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 访问值
count.value++; // 修改值

2. reactive:
   • reactive 用于创建一个包含多个响应式属性的对象。它接收一个普通对象作为参数，并返回一个响应式代理对象。
   • reactive 返回的对象的所有属性都是响应式的，即当属性值发生变化时，相关的视图会自动更新。
   • 通常用于处理复杂的对象或数组，比如组件中的数据模型。
   • 适用于包含多个属性或嵌套结构的数据。

示例：

import { reactive } from 'vue';

const state = reactive({
  name: 'John',
  age: 30
});

console.log(state.name); // 访问属性
state.age++; // 修改属性

关于 watch 的用法：

• watch 用于监听响应式数据的变化，并执行相应的操作。它可以接收一个回调函数或者包含回调函数的对象，用于处理数据变化时的逻辑。
• 在使用 watch 监听 ref 类型的数据时，直接传递 ref 对象即可。
• 在监听 reactive 类型的数据时，需要使用 watch 的第一个参数来访问具体的响应式属性。

示例：

import { ref, reactive, watch } from 'vue';

const count = ref(0);
const state = reactive({
  name: 'John',
  age: 30
});

// 监听 ref 类型的数据
watch(count, (newValue, oldValue) => {
  console.log('Count changed:', newValue);
});

// 监听 reactive 类型的数据
watch(() => state.age, (newValue, oldValue) => {
  console.log('Age changed:', newValue);
});

总结：

• ref 适用于简单的数据类型，返回一个包装后的引用。

• reactive 适用于复杂的对象或数组，返回一个包含多个响应式属性的对象。

• 在使用 watch 监听数据时，可以直接传递 ref 对象或使用箭头函数访问 reactive 对象的属性。 #百度面试#

作者：菜鸡在等着掉馅饼
链接：www.nowcoder.com/feed/main/d…
来源：牛客网