Vue面试题汇总（持续更新中）_vue 面试题 page console-CSDN博客

本文链接：https://blog.csdn.net/xieyuleisss/article/details/108530281

这是一份详细的Vue面试题集锦，涵盖了从MVVM概念、Vue优缺点、组件传值、生命周期、路由、Vuex等全方位的知识点，帮助开发者全面理解Vue.js的设计思想和实际运用。

摘要由CSDN通过智能技术生成

Vue面试题汇总

1.什么是MVVM？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和Model的对象（桥梁）。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2.MVVM和MVC区别？它和其他框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

3.vue的优点是什么？

· 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

· 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

· 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

· 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

4.组件之间的传值？

1.父组件与子组件传值
在父组件中给子组件标签上绑定一个属性，属性上挂载需要传递的值
在子组件通过props:{“自定义属性名”}来接收数据
子组件传给父组件
在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
在子组件的方法通过this. $e m i t (‘ 自定义事件名 ’) 来调用这个方法 2 . 非父子组件间的数据传递，兄弟组件传值创建一个空的 v u e 实例 b u s 通过 b u s .$ emit(‘事件名’)传到空的vue实例中
通过bus.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收

5.JS中判断数据类型的方法有几种?

最常见的判断方法：typeof

判断已知对象类型的方法： instanceof

根据对象的constructor判断： constructor

无敌万能的方法：jquery.type()

6.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id

获取：this.$route.params.id

7.active-class是哪个组件的属性？

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换。

8.嵌套路由怎么定义？

我们在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
示例代码：

9.什么是生命周期

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

10.Vue的生命周期

1.beforeCreate
在数据观测和初始化事件还未开始，VUE实例的挂载元素 $ el 和数据对象都为undefined
可以进行的事件：加loading事件
2.created
完成数据观测，属性和方法的运算，初始化事件，$ el 属性还没有显示出来
可以进行的事件：结束loading，请求数据为mounted作准备
3.beforeMount
在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。（$el和data都已经初始化，但仍是虚拟DOM节点）
4.Mounted
e l 被新创建的 v m . el被新创建的vm.el被新创建的vm.el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。（VUE实例挂载完成，data.filter成功渲染）
可以进行的事件：配合路由钩子使用
5.beforeUpdate
在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6.Update
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7.beforeDestroy
在实例销毁之前调用。实例仍然完全可用。
8.destroyed
在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11.vue生命周期的作用是什么？

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

12.第一次页面加载会触发哪几个钩子？

会触发下面这几个beforeCreate, created, beforeMount, mounted 。

13.DOM 渲染在哪个周期中就已经完成？

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

14. Vue实现数据双向绑定的原理：Object.defineProperty（）

在这里插入图片描述

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

实现过程

我们已经知道如何实现数据的双向绑定了，　那么首先要对数据进行劫持监听，所以我们首先要设置一个监听器Observer,用来监听所有的属性，当属性变化时，就需要通知订阅者Watcher,看是否需要更新．因为属性可能是多个，所以会有多个订阅者，故我们需要一个消息订阅器Dep来专门收集这些订阅者，并在监听器Observer和订阅者Watcher之间进行统一的管理．以为在节点元素上可能存在一些指令，所以我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令初始化成一个订阅者Watcher，并替换模板数据并绑定相应的函数，这时候当订阅者Watcher接受到相应属性的变化，就会执行相对应的更新函数，从而更新视图．

整理上面的思路，我们需要实现三个步骤，来完成双向绑定：


1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
 
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
 
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 { {}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    var obj = {
    }
    Object.defineProperty(obj, 'txt', {
    
        get: function () {
    
            return obj
        },
        set: function (newValue) {
    
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup'