Vue 面试题

妖狐艹你老母 2022-04-13 15:15 296阅读 0赞

## Vue面试题 ##

### 1、Vue总结： ###

vue的使用方式有两种
          方式一:像jQuery一样引入使用--vue的特性都可以使用，双向数据绑定
          方式二：跟node结合起来使用，使用的时候有点像java语言（面向对象）

### 2、为什么要使用vue（使用Vue的好处是什么）？MVVM的框架那么多？MVVM跟MVC有什么区别？MVVM的框架你知道有哪些？ ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70]

##### 2.1、Vue好处： #####

vue两大特点：响应式编程、组件化 
    vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

##### 2.2、MVVM定义： #####

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

##### 2.3、MVC的定义： #####

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早，前端并不那么成熟，很多业务逻辑也是在后端实现，所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC，是因为大前端的来到，出现了MVVM模式的框架，我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。2. 为什么会有MVVM框架？在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。3. MVVM框架:VUE的介绍Vue就是基于MVVM模式实现的一套框架，在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图viewModel:指的是vue实例化对象为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思？1.如果你已经有一个现成的服务端应用，你可以将vue 作为该应用的一部分嵌入其中，带来更加丰富的交互体验;2.如果你希望将更多业务逻辑放到前端来实现，那么VUE的核心库及其生态系统也可以满足你的各式需求（core+vuex+vue-route）。和其它前端框架一样，VUE允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。3.如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分割成为各自的组件和文件，vue有一个命令行工具，使快速初始化一个真实的工程变得非常简单（vue init webpack my-project）。我们可以使用VUE的单文件组件，它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。以上这三个例子，是一步步递进的，也就是说对VUE的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。VUE最独特的特性：响应式系统VUE是响应式的（reactive），也就是说当我们的数据变更时，VUE会帮你更新所有网页中用到它的地方。

### 3、Vue中有哪些钩子函数？作用是什么？ Vue的生命周期 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 1]

1 初始化前  --BeforeCreated
    
    2 初始化完成 ---***：发送ajax   --created    //比较常用
    
    3 双向数据绑定前 ---BeforeMount
    
    4 双向数据绑定完成 --Mounted
    
    5 更新前 --BeforeUpdate
    
    6 更新完成--updated
    
    7 销毁前--BeforeDestroyed
    
    8 销毁完成--Destroyed

### 4、vue中做数据渲染的时候如何保证将数据原样输出？ ###

1. v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
     2. v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
     3. {
       {}}：插值表达式，可以直接获取Vue实例中定义的数据或函数，
     使用插值表达式的时候，值可能闪烁；而使用v-html、v-text不会闪烁，
     有值就显示，没值就隐藏

### 5、vue中methods和computed有什么区别？应用场景如何？ ###

1.methods：方法，函数，绑定事件调用；不会使用缓存
    2.computed： 计算属性   本质是方法，使用时可以像属性一样使用，
    当操作的值没有发生改变时，会使用缓存，当值发生改变，才会改变；提高速度

### 6、Vue中如何处理原生的DOM事件？ ###

答：6.1  DOM：HTML DOM 定义了访问和操作 HTML 文档的标准 方法。
    
             DOM 将 HTML 文档表达为树结构。我们可以通过DOM灵活的获取树节点，
             并且操作节点（重新设置值、重新设置属性、重新设置样式）
    
        6.2 DOM事件：
           onclick、onmouseover、onmouseout、onchange、onkeyup、onkeydown
    
        6.3 Vue是如何处理的：通过v-on，简写@的方式定义事件
          @click、@mouseover、@mouseout、@change、@keyup、@keydown...
                            并绑定函数

### 7、什么是js的冒泡？Vue中如何阻止冒泡事件？ ###

js冒泡概念：当父元素内多级子元素绑定了同一个事件
    ，js会依次从内往外或者从外往内（？）执行每个元素的该事件，从而引发冒泡
        
        js解决冒泡：event.stopPropagation()
        vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

### 8、什么是js的回调地狱？为什么会引发回调地狱？如何解决回调地狱问题 ###

js的回调地狱：根据外层ajax请求的结果，将结果作为参数继续发起ajax请求
         --->引起回调地狱
        getA().then(res=>{
            getB(res.data.a).then(res=>{
    	    getC(res.data.b).then(res=>{
                   //....回调地狱
                })	
    	})
        })
        
        Promise 对象就是为了解决这个问题而提出的。
        它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。 
    
      getA().then(res=>{
    		return   getB(res.data.a)
    }).then(res=>{
    	//.....链式调用
    })

### 9、Vue中父子组件是如何传值的？ ###

9.1 父向子传值：子组件定义的时候，
    	 通过props:['num']定义父组件传值的参数名，
    	 当父组件调用子组件的时候就通过:num="a"的方式将值传给子组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 2]

9.2 子向父传值：无法直接传值，只能通过子类调用父类的方法，使用方法的参数传值
          在子组件的方法中通过$.emit("outshow",num)传值，第一个参数是父组件中的方法名，第二个参数是父组件中该方法的参数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 3]\#\# 10、Vue中双向数据绑定是如何实现的？

双向数据绑定只存在于form表单元素中
    首先双向数据的绑定需要通过 v-model 来将数据关联起来，
    其次在 data 中一定要定义好通过 v-model 关联的数据，
    Vue 在实现数据监听只能够监听到 data 中的数据，
    如果在 data 中没有定义该数据，那么将无法实现监听 ，
    同时也无法实现表单的双向数据绑定

### 11.Vue中有哪些事件修饰符？各有什么作用 ###

vue中的事件：@click、@mouseover、@mouseout、@change、@keyup、@keydown
    
        vue中的事件修饰符：.stop 阻止冒泡   .prevent:阻止默认事件

### 12、vue中有哪些指令？ ###

答：v-if
        v-else
        v-for
        v-text
        v-html
        v-model
        v-on：简写@
        v-bind：简写：

### 13、为什么要进行前后端分离？前后端分离的优势在哪里？劣势在哪里？ ###

答：前端专门负责前端页面和特效的编写
        后端专门负责后端业务逻辑的处理
        前端追求的是页面美观、页面流畅、页面兼容等
        后端追求的是三高（高并发、高可用、高性能）
        让他们各自负责各自的领域，让专业的人负责处理专业的事情
        提高开发效率
    
        缺点：1 当接口发生改变的时候，前后端都需要改变
              2 当发生异常的时候，前后端需要联调--联调是非常浪费时间的

### 14、说说你对前后端分离的开发模式的理解 ###

1.前端静态化
    前端有且仅有静态内容,再明确些,只有HTML/CSS/JS. 
    其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.
    前端内容的运行环境和引擎完全基于浏览器本身.
    
    2.后端数据化
    
    后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则
         :只提供数据,不提供任何和界面表现有关的内容.
    
    3.平台无关化
    
    前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的Restful接口和交互Json数据,就这2者而言,
    任何技术和平台都可以实现.
    
    4.构架分离化
    
    后端构架几乎可以基于任何语言和平台的任何解决方案,
    大型构架方面, RestTful Api可以考虑负载均衡;而数据,
    业务实现等可以考虑数据库优化和分布式 
    但总而言之,前后端的分离 也实现了 前后端构架的分离.

--------------------

##### 扶贫！！ 帮助一下孩子吧。感谢♥： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220413/abb451d3e1c44ba99fd5f33e518c0596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220413/140e8b0481af488088078e785c340bc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220413/6ebf3e781ef24d2fa3d7753304859cc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 3]: /images/20220413/92afc0d583a5481da03eb653cd889244.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 4]: /images/20220413/61929fc04d5a402eb854f8d173c9549e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYzMzEzMQ_size_16_color_FFFFFF_t_70 5]: /images/20220413/1d1378c7a77c47098361212a679c873a.png