2024年前端面试题及答案

1、请描述下对vue生命周期的理解

每一个vue实例都有一个完整的生命周期，主要分为五个阶段：创建、初始化、渲染、运行、销毁。 也就是从创建(new Vue（))、初始化数据(init)、编译模板(render function)、挂载Dom($el)、渲染($mount)→更新(update)→渲染(Virtual Dom re-Render)、销毁(destory)等一系列过程，我们称这是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

2、双向数据绑定是什么

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

3、 Vue组件之间的通信方式都有哪些   六种

props / $emit
   父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信
ref / $refs
   ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

eventBus事件总线（$emit / $on）
   eventBus事件总线适用于父子组件、非父子组件等之间的通信，

依赖注入（provide / inject）

$parent / $children

$attrs / $listeners

4、为什么data属性是一个函数而不是一个对象

在Vue组件中，data选项必须是一个函数，而不能直接是一个对象。这是因为Vue组件可以同时存在多个实例，如果直接使用对象形式的data选项，那么所有的实例将会共享同一个data对象，这样就会造成数据互相干扰的问题。

　　因此，将data选项设置为函数可以让每个实例都拥有自己独立的data对象。当组件被创建多次时，每个实例都会调用该函数并返回一个新的data对象，从而保证了数据的隔离性。

　　另外，data选项作为一个函数还具有一个重要的特性，就是它可以接收一个参数，这个参数是组件实例本身。这个特性在一些场景下非常有用，例如在定义组件时需要使用组件实例的一些属性或方法来计算初始数据。

5、动态给vue的data添加一个新的属性时会发生什么?怎样解决

Vue 不允许在已经创建的实例上动态添加新的响应式属性  新增得属性  并没有通过 Object.defineProperty 设置成响应式数据
      若想实现数据与视图同步更新，可采取下面三种解决方案

   Vue.set()   通过 Vue.set 向响应式对象中添加一个 property ，并确保这个新 property 同样是响应式的且触发视图更新
   Object.assign()  直接使用 0bject.assign()添加到对象的新属性不会触发更新
   $forcecUpdated()  $forceUpdate 迫使 Vue 实例重新渲染

6、v—if和v—for的优先级是什么

   在vue2中，v-for优先级比v-if高
   在vue3中，v-if优先级比v-for高

7、v-show和v—if有什么区别?使用场景分别是什么

 v-show 本质上是通过css的display属性来决定是否显示，   如果不显示，则为元素添加css—display:none,也就是说dom元素一直是存在的；
 v-if 则是把整个dom元素进行添加或删除

编译过程不同：

     v-show 只是简单地对css进行切换操作；

     v-if 有一个编译/卸载过程，会合适地销毁和重建内部事件监听和子组件

编译条件不同：

   v-show 都会编译，初始值为false时，只是将display设为none，但它也编译了，并且不会触发组件的生命周期

   v-if 是真正的条件渲染，但只有在渲染条件为true时才会进行编译，会触发组件的生命周期

v-show与v-if的使用场景
      v-show: 在需要非常频繁地进行切换的情况下，使用 v-show 较好

      v-if:在运行时条件很少改变时，使用 v-if 较好

8、你知道vue中key的原理吗?  说说你对它的理解

1、key的作用是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

2、在列表渲染的时候，若未设置key属性的话，可能会在列表进行更新的时候引发一些隐藏的问题。

3、vue中在使用transition过渡的时候，如果没有设置key做为唯一标识的话，可能会出现过渡动画无效。

4、 key 的主要作用有以下几点： 1、 追踪节点身份  2、高效的 DOM 更新   3、避免状态混淆

9、说说你对vue的mixin的理解，有什么应用场景?

         mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 在Vue中我们可以局部混入跟全局混入
 
        应用场景   在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

10、Vue常用的修饰符有哪些有什么应用场景

vue中修饰符分为以下五种：

表单修饰符    v-model

事件修饰符   stop   prevent   self   once   capture   passive   native

鼠标按键修饰符    left 左键点击   right 右键点击   middle 中键点击    @click.left="shout(1)"

键值修饰符   键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的   普通键（enter、tab、delete、space、esc、up...）

系统修饰键（ctrl、alt、meta、shift...）

v-bind修饰符   v-bind修饰符主要是为属性进行操作，用来分别有如下：async   prop   camel

应用场景    

stop：阻止事件冒泡   .native：绑定原生事件

once：事件只执行一次

self ：将事件绑定在自身身上，相当于阻止事件冒泡

prevent：阻止默认事件

caption：用于事件捕获

once：只触发一次

keyCode：监听特定键盘按下

right：右键

11、Vue中的$next Tick有什么作用

        Vue在更新DOM的时候是异步的，只要数据发生变化，Vue就会开启一个异步更新队列，$nextTick就是等队列中所有的数据变化完成之后，再统一进行更新。

使用场景   

1.在数据发生变化之后，想要立刻得到更新后的DOM元素，需要用$nextTick进行异步操作  

2.在生命周期中的created（）钩子进行DOM操作，也要用$nextTick

12、Vue实例挂载的过程

创建Vue实例：通过调用Vue构造函数，创建一个Vue实例，并传入配置对象。

初始化：在初始化阶段，Vue会进行一系列的初始化操作，包括合并配置项、初始化生命周期钩子、初始化事件系统、初始化响应式数据等。

模板编译：如果配置对象中存在template选项，Vue会将模板编译成渲染函数。渲染函数是Vue中用于生成虚拟DOM的函数。

创建虚拟DOM：通过调用渲染函数，Vue会根据模板生成虚拟DOM（Virtual DOM）。虚拟DOM是一个轻量级的JavaScript对象，它描述了真实DOM的结构和属性。

执行挂载函数：Vue会调用mount函数，将虚拟DOM渲染成真实DOM，并将其插入到页面中指定的挂载点上。

数据响应式：在挂载完成后，Vue会对数据进行响应式处理。当数据发生变化时，Vue会自动更新相关的视图。

完成挂载：Vue实例挂载完成后，会触发mounted生命周期钩子函数。在这个阶段，可以进行一些初始化的异步操作，或者与外部库进行交互。

new Vue 的时候调用会调用init 方法
    定义 s e t 、 set 、set、get 、 d e l e t e 、 delete 、delete、watch等方法
    定义 $on 、 o f f 、 off 、off、emit 等事件
    定义 u p d a t e 、 update、update、forceUpdate 、$destroy 生命周期
    调用 $mount 进行页面的挂载
    挂载的时候主要是通过 mountComponent 方法
    定义 updateComponent 更新函数
    执行 render 生成虚拟 DOM
    _update 将虚拟 DOM 生成真实 DOM 结构，并且染到页面中

13、Vue中组件和插件有什么区别

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件

组件的优势

       降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现

        调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单

        提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

    添加全局方法或者属性。如: vue-custom-element

    添加全局资源：指令/过滤器/过渡等。如 vue-touch

    通过全局混入来添加一些组件选项。如vue-router

    添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

    一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

两者的区别

        编写形式     注册形式

使用场景
        组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

        插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

14、Vue项目中你是如何解决跨域的呢?

        1.JSONP

        2.Nginx反向代理

        3.CORS解决跨域问题

        4.postMessage解决跨域问题

        5.WebSocket解决跨域问题

        6.devServer代理跨域

15、有写过自定义指令吗?自定义指令的应用场景有哪些?

全局注册：   主要是用过Vue.directive方法进行注册
局部注册：   通过在组件options选项中设置directive属性
应用场景：   防抖   图片懒加载   一键 Copy的功能

暂时写这些，后续  vue3  ts  http  webpack  css  js  es6  node.js   小程序  数据结构与算法等面试题  将会在我的公众号程序员夫子中更新  codefuzi   希望能和大家一起成长