vue面试题汇总

拼搏现实的明天。 2023-02-14 15:56 78阅读 0赞

# [vue面试题汇总][vue] #

**目录**

*  [1.vuex的作用？][1.vuex]
 *  [2.vue中的路由拦截器的作用？][2.vue]
 *  [3.axios的作用？][3.axios]
 *  [4.列举vue的常见指令。][4._vue]
 *  [5.列举Http请求中常见的请求方式？][5._Http]
 *  [6.对于MVVM的理解][6._MVVM]
 *  [7.Vue的生命周期][7.Vue]
 *  [8.Vue实现数据双向绑定的原理：Object.defineProperty（）][8.Vue_Object.defineProperty]
 *  [9.Vue组件间的参数传递][9.Vue]
 *  [10.Vue的路由实现：hash模式 和 history模式][10.Vue_hash_ _ history]
 *  [11.vue路由的钩子函数　][11.vue]
 *  [12.vue-cli如何新增自定义指令？][12.vue-cli]
 *  [13.vue如何自定义一个过滤器？][13.vue]
 *  [14.对keep-alive 的了解？][14._keep-alive]
 *  [15.v-if 和 v-show 区别][15.v-if _ v-show]
 *  [16.vue几种常用的指令][16.vue]
 *  [17.怎么定义 vue-router 的动态路由? 怎么获取传过来的值][17._ vue-router _]
 *  [18.vue常用的修饰符？][18.vue]
 *  [19.vue.js的两个核心是什么？][19.vue.js]
 *  [20.vue中 key 值的作用？][20.vue_ key]

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

[回到顶部][Link 1]

## 1.vuex的作用？ ##

vuex是一个专门为vue.js应用程序开发的状态管理模式  
    vuex可以帮助我们管理共享状态，也就是管理全局变量  
    vuex的几个核心概念：  
        vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性  
        state:state意为'状态'，是vuex状态管理的数据源  
        getter:getter的作用与filters有一些相似，可以将state进行过滤后输出  
        mutation:mutation是vuex中改变state的唯一途径，并且只能同步操作  
        action:一些对state的异步操作可以放在action中，并通过在action提交mutaion变更状态  
        module:当store对象过于庞大时，可以根据具体的业务需求分为多个module  
  
    我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面

[回到顶部][Link 1]

## 2.vue中的路由拦截器的作用？ ##

路由拦截，权限设置  
    例如：当用户没有登录权限的时候就会跳转到登录页面，用到的字段requireAuth:true

[回到顶部][Link 1]

## 3.axios的作用？ ##

vue中的ajax，用于向后台发起请求  
    特点：  
        从浏览器中创建XMLHttpRequests  
        从node.js创建http请求  
        支持Promise API  
        拦截请求和响应  
        转换请求数据和响应数据  
        取消请求  
        自动转换json数据  
        客户端支持防御XSRF  
    promise：  
        一个对象用来传递异步操作的信息  
        promise的出现主要是解决地狱回调的问题，无需多次嵌套  
        本质：分离异步数据获取和业务  
    拦截器分为请求拦截器和响应拦截器  
    \#请求拦截器  
    axios.interceptors.request.use(function(config)\{  
        return config;  
    \},function(error)\{  
        return Promise.reject(error);  
    \});  
    \#响应拦截器  
    axios.interceptors.response.use(function(response)\{  
        return response;  
    \},function(error)\{  
        return Promise.reject(error);  
    \});

[回到顶部][Link 1]

## 4.列举vue的常见指令。 ##

1.文本插值：\{ \{\}\} Mustache  
        <div id='app'>  
            \{ \{message\}\}  
        </div>  
    2.DOM属性绑定：v-bind  
        <div id='app-2'>  
            <span v-bind:title='message'>  
                鼠标悬停几秒钟查看此处动态绑定的提示信息  
            </span>  
        </div>  
    3.指令绑定一个事件监听器：v-on  
        <div id='app-5'>  
            <p>\{ \{message\}\}</p>  
            <button v-on:click='reverseMessage'>逆转消息</button>  
        </div>  
    4.实现表单输入和应用状态之间的双向绑定：v-model  
        <div id='app-6'>  
            <p>\{ \{message\}\}</p>  
            <input v-model='message'>  
        </div>  
    5.控制切换一个元素的显示：v-if和v-else  
        <div id='app-3'>  
            <p v-if='seen'>现在你看到我了</p>  
        </div>  
    6.列表渲染:v-for  
        <div id='app-4'>  
            <ol>  
                <li v-for='todo in todos'>  
                    \{ \{todo.text\}\}  
                </li>  
            </ol>

[回到顶部][Link 1]

## 5.列举Http请求中常见的请求方式？ ##

get  
        向特定的路径资源发出请求，数据暴露在url中  
    post  
        向指定路径资源提交数据进行处理请求，数据包含在请求体中  
    options  
        返回服务器针对特定资源所支持的http请求方法，允许客户端查看，测试服务器性能  
    head  
        向服务器与get请求相一致的响应，响应体不会返回，可以不必传输整个响应内容  
    put  
        从客户端向服务器端传送的数据取代指定的文档的内容  
    delete  
        请求服务器删除指定的页面  
    trace  
        回显服务器收到的请求，主要用于测试或者诊断  
    connect  
        http/1.1协议中预留给能够将连接改为管道方式的代理服务

[回到顶部][Link 1]

## 6.对于MVVM的理解 ##

MVVM 是 Model-View-ViewModel 的缩写。

**Model**代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。  
**　　View** 代表UI 组件，它负责将数据模型转化成UI 展现出来。  
**　　ViewModel** 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

viewmodel和model实现双向数据绑定

[回到顶部][Link 1]

## 7.Vue的生命周期 ##

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

2.vue生命周期的作用是什么？  
　　　　答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？  
　　　　答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？  
　　　　答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在 哪个周期中就已经完成？  
　　　　答：DOM 渲染在 mounted 中就已经完成了。

[回到顶部][Link 1]

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

采**用数据劫持结合发布者-订阅者模式**的方式，通过**Object.defineProperty（）**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

[回到顶部][Link 1]

## 9.Vue组件间的参数传递 ##

**1.父组件与子组件传值**  
　　　　父组件传给子组件：子组件通过props方法接受数据;  
　　　　子组件传给父组件：$emit方法传递参数  
**　　2.非父子组件间的数据传递，兄弟组件传值**  
　　　　eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

[回到顶部][Link 1]

## 10.Vue的路由实现：hash模式 和 history模式 ##

**　　hash模式：**在浏览器中符号“\#”，\#以及\#后面的字符称之为hash，用window.location.hash读取；  
　　　　特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。  
　　　　　　hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 [http://www.xxx.com][http_www.xxx.com]，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

**　　history模式：**history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。  
　　　　　　         history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 [http://www.xxx.com/items/id][http_www.xxx.com_items_id]。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。**Vue-Router 官网里如此描　　　　　　　　述：**“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页　　　　　　　　面就是你 app 依赖的页面。”

[回到顶部][Link 1]

## 11.vue路由的钩子函数　 ##

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

**　　beforeEach**主要有3个参数to，from，next：

**　　to**：route即将进入的目标路由对象，

**　　from**：route当前导航正要离开的路由

**　　next**：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

[回到顶部][Link 1]

## 12.vue-cli如何新增自定义指令？ ##