前端面试题（一）

1、说一下vue生命周期

什么是生命周期

Vue 实例从创建到销毁的过程就是生命周期。从开始创建，初始化数据，编译模板，挂载 Dom 到渲染，更新到渲染，销毁等一系列过程，称之为生命周期。

Vue生命周期共有8个阶段，分别为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroye

生命周期的作用

它的生命周期有多个事件钩子，让我们在控制整个 Vue 实例的过程中更容易形成好的逻辑。

生命周期的八个阶段

1、beforeCreate：组件实例刚被创建，组件属性计算之前。

2、created：组件实例刚被创建，属性已绑定，但 Dom 还未生成。

3、beforeMount：模板编译/挂载之前。在挂载开始之前被调用，相关的 render 函数首次被调用，实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html，此时注意还没有挂载到 Html 页面上。

4、mounted：模板编译/挂载之后。在 el 被新创建的 vm.el 替换，并挂载到实例上去之后被调用，实例已完成以下的配置：用上面编译好的的 html 内容替换 l 属性指向的 Dom 对象。完成模板中的 html 渲染到 html 页面中。此过程进行 ajax 交互。

5、beforeUpdate：组件更新之前。在数据更新之前调用，发生在虚拟 Dom 重新渲染打补丁之前，可以在钩子函数中进一步的更改状态，不会出大附加的重渲染过程。

6、updated：组件更新之后。在由于数据更改导致的虚拟 Dom 重新渲染和打补丁之后调用。调用是，组件 Dom 已经更新，所以可以执行依赖于 Dom 的操作，然而在大多数的情况下，应该避免在此期间更改状态，因为这可能会导致更新无线循环，该钩子函数在服务器端渲染期间不被调用。

7、beforeDestroy：组件销毁前调用。在示例销毁之前调用，实例仍然完全可用。

8、destroyed：组件销毁后调用。在实例销毁之后调用。调用后，所有的时间监听会被移除，所有的子实例也会被销毁，该钩子函数在服务器端渲染器件不被调用。

2、说一下组件通信

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。

除了使用vuex外还有下面6种组件间的通信方式：

props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信。
ref / $refs ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法。
eventBus事件总线适用于父子组件、非父子组件等之间的通信。
依赖注入（provide / inject）这种方式就是vue中依赖注入，该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
$parent / $children 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）；使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。
$attrs / $listeners $attrs：继承所有的父组件属性（除了props传递的属性、class 和 style），一般用在子组件的子元素上；$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）。

3、说一下vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

作用就是：存储组件公共数据。

4、说一下双向绑定的原理

我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成

数据层（Model）：应用的数据及业务逻辑
视图层（View）：应用的展示效果，各类UI组件
业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理。

5、知道哪些vue指令

v-bind：将数据绑定到HTML元素属性上，可以简写为“:”
v-on：绑定事件，可以简写为“@”【例如@click表示点击事件，即点一下会发生什么】
v-model：实现双向数据绑定
v-show：根据表达式的值，控制元素的显示或隐藏【相当于Java中的if】
v-if / v-else-if / v-else：根据表达式的值，条件性地渲染元素，当表达式为假时不渲染【相当于Java中的if/else if/else】
v-for：遍历一个数组或对象，生成相应的DOM元素【相当于Java中的for循环，一个组件出现几次，塞不同的数据进去】
v-text：将表达式的值作为元素的文本内容，可以简写为“{{ }}”
v-html：将表达式的值作为HTML内容输出

总之，Vue的指令非常丰富，可以很灵活地实现各种数据和视图之间的绑定关系。同时，Vue还支持自定义指令的开发，可以根据实际需求来扩展和定制指令。

6、说一下自定义指令

1）可以使用Vue.directive( dir_name , {} ) 来定义全局自定义指令

2）也可以使用 directives{ dir_name : {} } 来定义局部自定义指令

7、说一下路由传参

路由传参是指在前端路由中通过URL传递参数的方式，用于在不同页面之间传递数据和状态信息。

params传参：属于路径当中的一部分，在配置路由的时候需要占位
query传参：不属于路径当中的一部分，比如/home?k=v&k=v，不需要占位
props传参：路由组件传参(有三种方式)

8、说一下防抖节流

防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。

节流 (Throttling) 的含义是指在一定时间内，多次触发同一个事件，只执行第一次操作。例如，当我们拖动网页上的滚动条时，会不断触发 onscroll 事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。此时就可以使用节流技术，将一定时间内的多次触发限制为一次操作，只计算一次滚动距离，提高了浏览器性能和用户体验。

9、说一下this

自定义函数中的this指向的是window，事件处理程序下的this,指向绑定这个事件的事件源对象，自定义对象下的方法中的this指向调用这个方法的对象，严格模式下自定义函数的this是undefined，定时器下的this指向的是window。可以使用bind(),call(),apply()改变this的指向，箭头函数里面的this来源于声明时所在的上一级this的指向，箭头函数里面的this指向不能改变。

10、怎么阻止默认事件

event..stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向document.上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。

event.preventDefault()方法取消事件的默认动作。该方法将通知Wb浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

11、怎么阻止事件冒泡

调用`event.stopPropagation()`方法：在事件处理程序中，可以调用`event.stopPropagation()`来阻止事件继续向上冒泡。这个方法会阻止当前事件的冒泡，但不会影响其他监听的事件或默认行为。

返回`false`：在事件处理程序中使用`return false`也可以阻止事件冒泡，并且会阻止事件的默认行为。这种方法同样只会影响当前事件的传播，不会影响其他事件。

12、数组常用的方法

push()向数组的末尾添加新内容

pop()删除数组的最后一项

shift()删除数组的第一项

unshift()向数组首位添加新内容

slice()按照条件查找出其中的部分内容

splice()对数组进行增删改

join()用指定的分隔符将数组每一项拼接为字符串

concat()用于连接两个或多个数组

indexOf()检测当前值在数组中第一次出现的位置索引

sort()对数组的元素进行排序（默认是从小到大来排序并且是根据字符串来排序的）

13、数组去重知道哪些方法

双重for循环

for循环 +findIndex

sort 排序

14、字符串操作方法

获取字符串长度 length()

获取字符串中的第 i 个字符 charAt(i)

获取指定位置的字符 getChars(int srcBegin, int srcEnd, char[] dst, int dstBegin)

15、怎么判断一个数是不是素数，逻辑怎么写

输入一个数m，判断它是不是素数。

思路1，暴力输入：由于计算机的思维是类似于笨拙的往式子中输入数字，一直到最后得出一个数字可以满足该式子，此处的思维可以类似，用m%a==0（ps：规定一个整型a），由于m是输入的已知的一个数，可以用暴力穷举，不停循环输入增长的数字，然后可以用count++去累加整除以至于最后找到大于等于三个的则不为素数，若等于两个则为素数。

思路2，优化简化代码：由于已知每一个数都可以被1和自身整除，且只能被小于自己一半的数整除（即a属于【2，m/2】这个区间），则此时循环要从i=2开始，再次来count++。