前端面试题

吴嘉鸿

已于 2024-07-01 14:20:10 修改

阅读量1.8k

点赞数 35

文章标签： vue.js javascript 前端面试

于 2024-03-25 16:56:19 首次发布

本文链接：https://blog.csdn.net/weixin_43460646/article/details/137018841

版权

原理、定义

ref的作用

获取dom元素 this.$refs.box
获取子组件中的data this.$refs.box.msg
调用子组件中的方法 this.$refs.box.open()

双向数据绑定原理

vue的双向数据绑定原理是什么？里面的关键点在哪？

Vue 双向绑定就是：数据变化更新视图，视图变化更新数据

Vue的双向数据绑定原理主要基于：

数据劫持和观察者（发布-订阅）模式实现的，vue2采用Object.defineProperty实现，vue3采用Proxy实现，
其关键点在于数据劫持，就是说对数据的读取和修改进行拦截。
而观察者模式，是当属性发生改变的时候，使用该数据的地方也发生改变。

Vue2 跟 vue3 响应式的区别

Vue2.0和Vue3.0的区别在于性能优化、组合式API、响应式系统和虚拟DOM等方面

Vue 2 使用 Object.defineProperty 实现响应式，而 Vue 3 使用 ES6 的 Proxy 对象实现响应式。
Vue 2 只能监听已存在的属性，而Vue3可以监听整个对象并自动检测到变化，而不仅仅是属性。
Vue 3 引入了 ref 和 reactive 两个全新 API。ref 可以将普通的数据转换为响应式数据，而 reactive 可以直接将一个对象转换为响应式对象。这使得创建和管理响应式数据更加方便。

Foreach、map、for的区别

forEach在return时返回undefined；map返回新数组
数组类型为基本数据类型时（arr=[1,2,3]），forEach()和map()都不会改变原数组；
数组类型为引用数据类型时（arr=[{name: 2, age: 18},{},{}]），forEach()和map()都会改变原数组；
forEach()不支持链式操作；map()支持链式操作；

for

for 循环是 JavaScript 的基本语法之一，也可以用于遍历数组。
for 循环需要手动控制循环的索引值和循环的边界条件，因此需要编写更多的代码。
for 循环可以使用 break 和 continue 控制循环的流程。
for 循环通常用于对数组进行复杂的遍历，或者需要根据数组元素生成一个新的数组时使用。

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

哪些遍历方式会修改原数组？

unshift、shift、push、pop、splice会改变原数组

forEach、map、filter、reduce等遍历方式不会改变原数组

本地存储有哪些？有什么区别？

Cookie：
- 存储方式：以键值对的形式存储在客户端，并随每次 HTTP 请求发送到服务器。
- 容量：每个 cookie 的存储容量通常不超过 4KB。
- 生命周期：可以设置过期时间，可以长期保存在客户端，即使浏览器关闭后仍然存在。
- 安全性：由于会随每个 HTTP 请求发送到服务器，因此可能会带来安全风险，且可以被用户和服务端修改。
- 主要用途：用于会话管理、跟踪用户信息等。
localStorage：
- 存储方式：同样以键值对的形式存储在客户端，但数据保存在浏览器中。
- 容量：每个域名下一般可以存储 5MB 左右的数据。
- 生命周期：除非被清除，否则会一直保存在客户端，没有过期时间。
- 安全性：数据仅存储在客户端，不会随每个 HTTP 请求发送给服务器。
- 主要用途：用于本地持久化存储，适合存储较大量的数据。
sessionStorage：
- 存储方式：同样以键值对的形式存储在客户端，数据仅在当前会话期间有效。
- 容量：与localStorage相似，一般也是 5MB 左右。
- 生命周期：数据仅在当前会话期间有效，关闭标签页或浏览器后数据被清除。
- 安全性：数据仅存储在客户端，不会随每个 HTTP 请求发送给服务器。
- 主要用途：适合在会话期间临时存储数据，数据不需要长期保留。

总体来说

Cookie 是最古老的一种存储方式，主要用于会话管理和用户信息跟踪；
localStorage 适合用于本地持久化存储大量数据；
sessionStorage 则适合在会话期间存储临时数据

JS数据类型，如何判断？

常见数据类型有：字符串string、数字number、数组array、布尔值boolean、对象object、函数function、空值null、未定义undefined，可通过typeof、instanceof、isArray等来判断数据类型

ES6新特性

let、const关键字、箭头函数、扩展运算符、解构赋值、类和继承、模块化等

Vue 组件 data 为什么必须是函数 ?

因为组件是可以复用的,JS 里对象是引用关系，如果我们直接将 data 定义为一个对象，那么所有实例将共享同一个对象作为数据源，会导致子组件中的 data 属性值互相污染,产生副作用。通过将 data 定义为一个函数，在每次创建一个组件实例时，Vue 都会调用该函数返回一个新的数据对象，确保每个组件实例都有自己独立的数据源，从而避免数据共享和相互影响的问题。这样做符合 Vue 的组件化设计理念，也有利于保持组件间的隔离性和可维护性。

var、let、const的区别

1. 作用域：

var：var声明的变量具有函数作用域或全局作用域。这意味着变量在声明它的函数内可见，而且在函数外也可以访问。
let：let声明的变量具有块级作用域。这意味着变量仅在声明它的块（例如，if语句或循环）内可见。
const：const声明的变量也具有块级作用域，类似于let，但其值不能被重新赋值。请注意，这不意味着该值是不可变的，而只是指变量名不能再指向其他值。

2. 变量提升：

var：var可以进行变量提升。这意味着你可以在变量声明之前使用变量，但其值将为undefined。

let和const：let和const声明的变量不会被提升，这意味着在变量声明之前使用变量会抛出错误。

3. 重复声明：

var：可以多次声明同一个变量，并且不会抛出错误。
let和const：不允许在同一作用域内重复声明同一个变量，否则会抛出错误。

4. 可变性：

var和let：声明的变量可以被重新赋值，并且其值可以更改。
const：声明的变量是常量，一旦赋值后就不能再更改。但对于对象和数组等引用类型，其属性或元素可以修改。

综上所述，推荐使用let和const来声明变量，因为它们具有更严格的作用域规则，并能避免一些常见的问题，如变量提升和重复声明。而const则适用于那些不需要被重新赋值的常量。只有在特殊情况下才使用var

Vue生命周期、组件通讯、Vuex、登录拦截、导航守卫、常用指令生命周期：包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

mixins生命周期跟上面一致，DOM渲染在mounted周期中就已经完成

第一次加载页面会触发 beforeCreate，created，beforeMount，mounted这四个钩子

DOM 渲染在 mounted 中就已经完成了

组件通讯：props、$emit（父子）、$parent、$children、$refs（父子）、EventBus、vuex（父子、隔代、兄弟）

Vuex属性：state、getters、mutations、actions、modules

登录拦截：可通过路由守卫、请求拦截、响应拦截等方式实现

导航守卫：全局前置守卫、全局后置钩子、路由独享守卫、组件内守卫

常用指令：v-model、v-for、v-show、v-if、v-bind、v-on等

Vuex执行流程

在 vue 组件里面，通过 dispatch 来触发 actions 提交修改数据的操作，然后通过 actions 的 commit 触发 mutations 来修改数据，mutations 接收到 commit 的请求，就会自动通过 mutate 来修改 state，最后由 store 触发每一个调用它的组件的更新。