您的当前位置：首页前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

来源：华佗小知识

HTML/CSS 面试题

JavaScript 面试题

JavaScript 的基本数据类型有哪些？

说明：JavaScript 中有七种基本数据类型：undefined、null、boolean、number、string、symbol（ES6 引入）和 bigint（ES11 引入）。

示例：

let num = 10;         // number
let str = "Hello";    // string
let isTrue = true;    // boolean
let nothing = null;    // null
let notDefined;        // undefined
let sym = Symbol();    // symbol
let bigInt = BigInt(123); // bigint

什么是闭包？

说明：闭包是指一个函数能够访问其外部作用域的变量，即使外部函数已经返回。闭包可以用来创建私有变量。

示例：

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}
const increment = outer();
increment(); // 1
increment(); // 2

解释原型链的概念。

说明：JavaScript 中的对象通过原型链继承属性和方法。每个对象都有一个 __proto__ 属性，指向其构造函数的原型。

示例：

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');
john.greet(); // Hello, my name is John

JavaScript 中的 `this` 是什么？

说明：this 是一个动态绑定的关键字，指向函数执行时的上下文。它的值取决于调用函数的方式。

示例：

const obj = {
    name: 'Alice',
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};
obj.greet(); // Hello, Alice

const greetFunc = obj.greet;
greetFunc(); // Hello, undefined (在非严格模式下)

解释 == 和 === 的区别。
- 说明：== 是宽松比较，会进行类型转换；=== 是严格比较，不会进行类型转换。
- 示例：
```
console.log(0 == '0');  // true
console.log(0 === '0'); // false
```
什么是 Promise？如何使用？
- 说明：Promise 是用于处理异步操作的对象，表示一个可能在将来某个时间点完成的操作。它有三种状态：pending（进行中）、fulfilled（已完成）、rejected（已失败）。
- 示例：
```
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched!');
        }, 1000);
    });
};

fetchData().then(data => console.log(data)); // 1秒后输出 "Data fetched!"
```

什么是 async/await？

说明：async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码。async 声明一个异步函数，await 用于等待 Promise 完成。

示例：

const fetchData = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched!');
        }, 1000);
    });
};

const fetchAsyncData = async () => {
    const data = await fetchData();
    console.log(data);
};
fetchAsyncData(); // 1秒后输出 "Data fetched!"

解释事件冒泡和事件捕获。

说明：事件冒泡是指事件从目标元素向上冒泡到父元素的过程；事件捕获是指事件从父元素向下传播到目标元素的过程。可以通过 addEventListener 的第三个参数控制。

示例：

<div id="parent">
    <button id="child">Click me</button>
</div>

<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
    console.log('Parent clicked');
}, false); // false 为冒泡，true 为捕获

child.addEventListener('click', () => {
    console.log('Child clicked');
}, false);
</script>

什么是节流（throttling）和防抖（debouncing）？

说明：节流是指某个函数在一定时间内只能执行一次；防抖是指在事件触发后等待一段时间，如果在这段时间内又触发了事件，则重新计时。

示例（节流）：

function throttle(fn, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime > delay) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

示例（防抖）：

function debounce(fn, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

解释浅拷贝和深拷贝的区别。

示例（浅拷贝）：

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 3;
console.log(original.b.c); // 3 (原对象也受到影响)

示例（深拷贝）：

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 2 (原对象没有受到影响)

Vue.js 面试题

Vue 的核心概念是什么？
- 说明：Vue.js 是一个用于构建用户界面的渐进式框架。其核心概念包括响应式数据绑定、组件化开发和虚拟 DOM。
- 示例：
```
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
```

什么是 Vue 实例的生命周期钩子？

说明：Vue 实例在创建、挂载、更新和销毁的过程中会经历不同的生命周期阶段，生命周期钩子允许我们在这些阶段执行特定操作。

示例：

new Vue({
    data() {
        return {
            message: 'Hello!'
        };
    },
    created() {
        console.log('组件创建时调用');
    },
    mounted() {
        console.log('组件挂载后调用');
    },
    destroyed() {
        console.log('组件销毁前调用');
    }
});

如何在 Vue 中创建组件？
- 说明：Vue 组件是 Vue 应用的核心，通过 Vue.component() 或单文件组件（.vue 文件）来定义。
- 示例：
```
Vue.component('my-component', {
    template: '<div>A custom component!</div>'
});
```

什么是双向数据绑定，如何实现？

说明：双向数据绑定允许视图和模型之间同步变化。Vue.js 使用 v-model 指令实现双向绑定。

示例：

<div id="app">
    <input v-model="inputValue">
    <p>{{ inputValue }}</p> <!-- 实时显示输入的内容 -->
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            inputValue: ''
        };
    }
});
</script>

Vue 的计算属性与方法的区别是什么？

说明：计算属性是基于其依赖进行缓存的，当依赖改变时才会重新计算；方法是每次调用时都会执行。

示例：

new Vue({
    el: '#app',
    data() {
        return {
            number: 1
        };
    },
    computed: {
        double() {
            return this.number * 2; // 计算属性
        }
    },
    methods: {
        doubleMethod() {
            return this.number * 2; // 方法
        }
    }
});

Vue 中的指令是什么？

说明：指令是 Vue.js 特有的特殊属性，用于在 DOM 元素上应用特定的行为。常见的指令有 v-if、v-for、v-show 等。

示例：

<div id="app">
    <p v-if="isVisible">这个段落是可见的</p>
    <button @click="toggleVisibility">切换可见性</button>
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            isVisible: true
        };
    },
    methods: {
        toggleVisibility() {
            this.isVisible = !this.isVisible; // 切换可见性
        }
    }
});
</script>

什么是 Vuex，如何使用？

说明：Vuex 是 Vue.js 的状态管理库，允许集中管理组件的状态。它通过 State、Getters、Mutations 和 Actions 进行状态管理。

示例：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    }
});

new Vue({
    el: '#app',
    store,
    computed: {
        count() {
            return this.$store.state.count; // 获取状态
        }
    },
    methods: {
        increment() {
            this.$store.commit('increment'); // 提交变更
        }
    }
});

如何在 Vue 中实现路由？

说明：Vue Router 是 Vue.js 的官方路由管理器，允许在应用中实现导航和路由。

示例：

const router = new VueRouter({
    routes: [
        { path: '/home', component: HomeComponent },
        { path: '/about', component: AboutComponent }
    ]
});

new Vue({
    el: '#app',
    router
});

什么是 Vue 的过滤器，如何使用？

说明：过滤器用于对数据进行格式化和处理，在模板中使用。

示例：

Vue.filter('capitalize', function(value) {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
});

new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello'
        };
    }
});

什么是服务端渲染（SSR），Vue 如何实现？
- 说明：服务端渲染是指在服务器上生成 HTML，并返回给客户端，提升首屏加载速度和 SEO 性能。Vue 可以通过 Nuxt.js 等框架实现 SSR。
- 示例：
```
// 使用 Nuxt.js
export default {
    asyncData(context) {
        return context.$axios.$get('/api/data').then(data => {
            return { data };
        });
    }
};
```

Vue 2 vs Vue 3 面试题

Vue 2 和 Vue 3 的响应式系统有什么区别？
- 说明：Vue 2 使用 Object.defineProperty 实现响应式，主要通过 getter/setter 劫持对象属性。而 Vue 3 则使用 Proxy API，实现更加高效和灵活的响应式系统。
- 示例（Vue 2）：
```
const vm = new Vue({
    data: {
        message: 'Hello'
    }
});
vm.message = 'World'; // 会触发视图更新
```
- 示例（Vue 3）：
```
const { reactive } = Vue;
const state = reactive({
    message: 'Hello'
});
state.message = 'World'; // 会触发视图更新
```

Vue 3 引入的 Composition API 有什么优势？

说明：Composition API 允许更灵活的代码组织和复用逻辑。它支持逻辑的组合，减少了大型组件中的代码耦合，提高了可读性。

示例：

// Vue 2
export default {
    data() {
        return { count: 0 };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};

// Vue 3
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const increment = () => count.value++;
        return { count, increment };
    }
};

在 Vue 3 中如何创建一个组件？
- 说明：Vue 3 支持使用 Composition API 创建组件，同时也保留了 Options API 的使用方式。
- 示例（使用 Composition API）：
```
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return () => <div>Hello, Vue 3!</div>;
    }
});
```
Vue 2 中的 $set 和 Vue 3 中的反应性系统如何处理新增属性？
- 说明：在 Vue 2 中，添加新属性需要使用 $set 方法才能使其响应式；而在 Vue 3 中，使用 Proxy 后，新增属性会自动变为响应式。
- 示例（Vue 2）：
```
const vm = new Vue({
    data: {
        obj: {}
    }
});
Vue.set(vm.obj, 'newProp', 'value'); // 新增属性使其响应式
```
- 示例（Vue 3）：
```
const { reactive } = Vue;
const state = reactive({ obj: {} });
state.obj.newProp = 'value'; // 新增属性自动响应
```
如何处理 Vue 2 和 Vue 3 中的事件监听？
- 说明：在 Vue 2 中使用 v-on 监听事件，而在 Vue 3 中可以使用 @ 符号简化语法。
- 示例（Vue 2）：
```
<button v-on:click="handleClick">Click me</button>
```
- 示例（Vue 3）：
```
<button @click="handleClick">Click me</button>
```
Vue 3 中的 Teleport 组件是什么？有什么用？
- 说明：Teleport 组件允许将子组件渲染到 DOM 的不同位置，通常用于模态框或工具提示等场景。
- 示例：
```
<template>
    <teleport to="body">
        <div class="modal">这是一个模态框</div>
    </teleport>
</template>
```
Vue 3 中的 v-model 有哪些变化？
- 说明：Vue 3 中的 v-model 允许更灵活的使用，支持多个 v-model 和自定义 modelValue 属性。
- 示例：
```
<input v-model="message" />
```
- 示例（多个 v-model）：
```
<MyComponent v-model:title="title" v-model:content="content" />
```
Vue 3 引入的 Suspense 组件有什么用途？
- 说明：Suspense 组件用于处理异步组件的加载状态，提供 fallback 内容直到异步组件加载完成。
- 示例：
```
<suspense>
    <template #default>
        <AsyncComponent />
    </template>
    <template #fallback>
        <div>Loading...</div>
    </template>
</suspense>
```

Vue 3 中的 `provide/inject` 是如何工作的？

说明：provide/inject 允许父组件向其所有子组件提供数据，而不需要通过 props 层层传递。

示例：

// 父组件
import { provide } from 'vue';
export default {
    setup() {
        provide('key', 'value');
    }
};

// 子组件
import { inject } from 'vue';
export default {
    setup() {
        const value = inject('key');
        console.log(value); // 'value'
    }
};

在 Vue 2 和 Vue 3 中如何处理错误捕获？
- 说明：Vue 2 中使用全局的 errorHandler 和组件内的 errorCaptured；而 Vue 3 采用了新的 API，可以在 setup 中使用 onErrorCaptured。
- 示例（Vue 2）：
```
Vue.config.errorHandler = (err, vm) => {
    console.error(err);
};
```
- 示例（Vue 3）：
```
import { onErrorCaptured } from 'vue';
setup() {
    onErrorCaptured((err) => {
        console.error(err);
        return false; // 继续传播
    });
}
```

FLutter

1. 什么是 Flutter？它的优势是什么？

Flutter 是 Google 提供的开源 UI 框架，用于构建跨平台应用程序。它允许使用 Dart 编程语言编写代码，并通过一个代码库生成适用于 iOS、Android、Web 和桌面应用的界面。
优势：
- 单一代码库支持多平台。
- 高性能，因为 Flutter 使用自己的渲染引擎。
- 丰富的自定义控件，提供了极大的设计自由。
- 热重载功能，提高开发效率。

2. StatefulWidget 和 StatelessWidget 有什么区别？

StatelessWidget 是不可变的，一旦构建完成，Widget 的状态不可更改，通常用于无状态的 UI 元素。
StatefulWidget 是可变的，可以在运行时动态更改状态，需要通过 setState 来更新 UI。

3. Flutter 中的状态管理有哪些方式？

Flutter 提供了多种状态管理的方式：
1. setState()：最基础的状态管理方式，适用于小范围的组件状态管理。
2. InheritedWidget：用于在组件树中跨越多个组件共享数据。
3. Provider：一种更现代且常用的状态管理库，基于 InheritedWidget，简化了状态管理流程。
4. Riverpod：Provider 的替代方案，提供更灵活的 API。
5. Bloc (Business Logic Component)：使用事件和状态流来管理应用程序状态。
6. GetX：轻量级的状态管理、依赖注入和路由管理框架。

4. 什么是 Hot Reload 和 Hot Restart？有什么区别？

Hot Reload：只重新加载 Dart 代码的更改，并保持应用程序的状态不变。这使得开发过程更加高效。
Hot Restart：重新启动应用程序，并重新加载所有状态和代码，类似于应用的冷启动。

5. Flutter 中的 Widget 树是什么？为什么重要？

在 Flutter 中，所有东西都是 Widget，Flutter 应用由一棵 Widget 树组成。Widget 树定义了应用程序的 UI 和布局，理解和构建有效的 Widget 树对于提高性能非常重要。

6. 什么是 Keys？为什么需要使用 Keys？

Keys 是 Flutter 中用于标识和跟踪 Widget 的特殊属性。它们在 Widget 树中起到识别作用，特别是在 List 或状态复杂的情况下，Keys 帮助 Flutter 正确地更新和维护 Widget。
使用场景：
- 在 ListView 中保持元素顺序不变。
- 当需要保留 StatefulWidget 状态时。

7. Flutter 中如何处理异步操作？

Flutter 提供了多种处理异步操作的方式：
1. 使用 async 和 await 处理异步函数。
2. 使用 Future 来表示异步操作的结果。
3. 使用 Stream 来处理一系列的异步事件，例如流式数据。

8. Flutter 中的 Navigator 和路由是什么？如何管理路由？

Navigator 是 Flutter 中用于管理应用页面导航的组件。它维护一个堆栈，用于跟踪屏幕导航。
路由管理：
1. 通过 Navigator.push() 和 Navigator.pop() 方法进行页面间的跳转和返回。
2. 使用 MaterialPageRoute 或自定义的 PageRoute 实现页面动画。
3. 通过 onGenerateRoute 或 Navigator 2.0 实现复杂的路由管理。

9. 什么是 FutureBuilder 和 StreamBuilder？它们的作用是什么？

FutureBuilder 是用于处理和显示 Future 数据的 Widget，适合一次性异步数据获取。
StreamBuilder 则用于处理流数据，适合用于多次异步数据变化的场景（如数据流）。

10. 如何优化 Flutter 应用的性能？

优化方法：
1. 避免在 build() 方法中执行繁重的计算。
2. 使用 const 构建不可变的 Widget。
3. 合理使用 ListView.builder 等延迟加载的列表控件。
4. 使用 RepaintBoundary 降低不必要的重绘。
5. 分析性能瓶颈，可以通过 Flutter DevTools 进行调试。

11. Flutter 中如何进行网络请求？

可以使用 Flutter 提供的 http 包进行网络请求。以下是一个简单的网络请求示例：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}

12. 如何在 Flutter 中实现动画效果？

Flutter 提供了多种方式实现动画，包括：
1. 使用 AnimatedBuilder 或 AnimatedWidget 来实现基本动画。
2. 使用 Tween 和 AnimationController 实现自定义动画。
3. 使用 Implicit Animations 如 AnimatedContainer、AnimatedOpacity 等简化常见动画效果的实现。

13. Flutter 中如何进行国际化 (i18n)？

Flutter 提供了 flutter_localizations 包来支持国际化。主要步骤包括：
1. 在 pubspec.yaml 中添加依赖：
```
dependencies:
  flutter_localizations:
    sdk: flutter
```
2. 使用 Intl 包来管理翻译文件。
3. 在 MaterialApp 中配置 localizationsDelegates 和 supportedLocales。

14. 什么是 Sliver？如何使用 Sliver Widgets？

Sliver 是一组可以延迟加载和滚动的 Widget。它们允许更灵活的滚动效果，特别是在大数据列表和自定义滚动布局中。常见的 Sliver 包括 SliverList、SliverGrid、SliverAppBar 等。

15. Flutter 中如何实现平台特定的代码？

Flutter 通过平台通道（Platform Channels）允许与原生代码（如 Android 的 Kotlin/Java，iOS 的 Swift/Objective-C）进行通信，从而调用平台特定的功能。
可以通过 MethodChannel 实现 Flutter 与原生代码的双向通信。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

HTML/CSS 面试题

JavaScript 面试题

JavaScript 的基本数据类型有哪些？

什么是闭包？

解释原型链的概念。

JavaScript 中的 this 是什么？

解释 == 和 === 的区别。

什么是 Promise？如何使用？

什么是 async/await？

解释事件冒泡和事件捕获。

什么是节流（throttling）和防抖（debouncing）？

解释浅拷贝和深拷贝的区别。

Vue.js 面试题

Vue 的核心概念是什么？

什么是 Vue 实例的生命周期钩子？

如何在 Vue 中创建组件？

什么是双向数据绑定，如何实现？

Vue 的计算属性与方法的区别是什么？

Vue 中的指令是什么？

什么是 Vuex，如何使用？

如何在 Vue 中实现路由？

什么是 Vue 的过滤器，如何使用？

什么是服务端渲染（SSR），Vue 如何实现？

Vue 2 vs Vue 3 面试题

Vue 2 和 Vue 3 的响应式系统有什么区别？

Vue 3 引入的 Composition API 有什么优势？

在 Vue 3 中如何创建一个组件？

Vue 2 中的 $set 和 Vue 3 中的反应性系统如何处理新增属性？

如何处理 Vue 2 和 Vue 3 中的事件监听？

Vue 3 中的 Teleport 组件是什么？有什么用？

Vue 3 中的 v-model 有哪些变化？

Vue 3 引入的 Suspense 组件有什么用途？

Vue 3 中的 provide/inject 是如何工作的？

在 Vue 2 和 Vue 3 中如何处理错误捕获？

FLutter

1. 什么是 Flutter？它的优势是什么？

2. StatefulWidget 和 StatelessWidget 有什么区别？

3. Flutter 中的状态管理有哪些方式？

4. 什么是 Hot Reload 和 Hot Restart？有什么区别？

5. Flutter 中的 Widget 树是什么？为什么重要？

6. 什么是 Keys？为什么需要使用 Keys？

7. Flutter 中如何处理异步操作？

8. Flutter 中的 Navigator 和路由是什么？如何管理路由？

9. 什么是 FutureBuilder 和 StreamBuilder？它们的作用是什么？

10. 如何优化 Flutter 应用的性能？

11. Flutter 中如何进行网络请求？

12. 如何在 Flutter 中实现动画效果？

13. Flutter 中如何进行国际化 (i18n)？

14. 什么是 Sliver？如何使用 Sliver Widgets？

15. Flutter 中如何实现平台特定的代码？

JavaScript 中的 `this` 是什么？

解释 `==` 和 `===` 的区别。

Vue 2 中的 `$set` 和 Vue 3 中的反应性系统如何处理新增属性？

Vue 3 中的 `v-model` 有哪些变化？

Vue 3 引入的 `Suspense` 组件有什么用途？

Vue 3 中的 `provide/inject` 是如何工作的？