Vue.js 面试题整理

时间 2019-11-21

标签 vue.js vue 面试整理栏目 JavaScript 繁體版

原文原文链接

Vue项目结构介绍

build 文件夹：用于存放 webpack 相关配置和脚本。
config 文件夹：主要存放配置文件，好比配置开发环境的端口号、开启热加载或开启gzip压缩等。
dist 文件夹：默认命令打包生成的静态资源文件。
node_modules：存放 npm 命令下载的开发环境和生产环境的依赖包。
src: 存放项目源码及须要引用的资源文件。
src下assets：存放项目中须要用到的资源文件，css、js、images 等。
src下componets：存放 vue 开发中一些公共组件。
src下emit：本身配置的 vue 集中式事件管理机制。
src下router：vue-router vue 路由的配置文件。
src下service：本身配置的 vue 请求后台接口方法。
src下page：存在 vue页面组件的文件夹。
src下util：存放 vue开发过程当中一些公共的 js 方法。
src下vuex：存放 vuex 为vue专门开发的状态管理器。
src下app.vue：整个工程的 vue 根组件。
src下main.js：工程的入口文件。
index.html：设置项目的一些meta头信息和提供html元素节点，用于挂载 vue。
package.json：对项目的描述以及对项目部署和启动、打包的 npm 命令管理。

Vue 经常使用指令

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),须要注意从vue2开始取消了$index
v-show 显示内容（同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用不然报错模板编译错误
v-bind 动态绑定做用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，能够缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法一、对象型 '{red:isred}' 二、三元型 'isred?"red":"blue"' 三、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

v-for 与 v-if 的优先级

当它们处于同一节点，v-for 的优先级比 v-if 更高。css

vue中 keep-alive 组件的做用

keep-alive：主要用于保留组件状态或避免从新渲染。两个重要属性，include 缓存组件名称，exclude 不须要缓存的组件名称。html

v-if 和 v-show 有什么区别

共同点：

v-if 和 v-show 均可以用来动态显示DOM元素。前端

区别：

编译过程： v-if 是真正的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
编译条件： v-if 是惰性的，若是在初始渲染时条件为假，则什么也不作。直到条件第一次变为真时，才会开始渲染条件块。v-show 无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。
性能消耗： v-if有更高的切换消耗。v-show 有更高的初始渲染消耗。
应用场景： v-if适合运行时条件不多改变时使用。v-show 适合频繁切换。

v-on 能够监听多个方法吗？

v-on 能够监听多个方法，可是同一种事件类型的方法，v-on 只能监听一个。vue

vue 中 key 值的做用

用于管理可复用的元素。由于Vue 会尽量高效地渲染元素，一般会复用已有元素而不是从头开始渲染。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。key的做用主要是为了高效的更新虚拟DOMjava

vue $nextTick 做用是什么？

官方解释：在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。简单的说就是再DOM操做时，vue的更新是异步的，$nextTick 是用来知道何时 DOM 更新完成的。举例：咱们给一个div设置显示隐藏，当点击 button 的时候 #textDiv 先是被渲染出来，接着咱们获取 #textDiv 的 html内容node

<div id="app">
    <div id="textDiv" v-if="isShow">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        isShow: false
    },
    methods:{
        getText:function(){
            this.isShow= true;
            var text = document.getElementById('textDiv').innnerHTML;
             console.log(text);
        }
    }
})
</script>
复制代码

这段代码表面上看不会有问题，但实际上点击报错，提示获取不到div元素，这里就涉及到 Vue 异步更新队列。python

Vue异步更新队列

Vue 执行 DOM 更新时，只要观察到数据变化，就会自动开启一个队列，并缓冲在同一个事件循环中发生的因此数据改变。在缓冲时会去除重复数据，从而避免没必要要的计算和 DOM 操做。以上面的代码举例，你用一个 for 循环来动态改变 isShow 100 次，其实它只会应用最后一次改变，若是没有这种机制，DOM 就要重绘 100 次，这当然是一个很大的开销。因此执行 this.isShow= true时，#textDiv 尚未被建立出来，直到下一个 Vue 事件循环时，才开始建立。上面的代码应修改成：webpack

getText:function(){
    this.showDiv = true;
    this.$nextTick(function(){
            var text = document.getElementById('div').innnerHTML;
            console.log(text);  
    });
}
复制代码

Vue 如何注册组件

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让咱们可使用独立可复用的小组件来构建大型应用，任意类型的应用界面均可以抽象为一个组件树ios

全局注册

在 src 文件夹中新建 utils 文件夹，在 utils 文件夹中新建 components.js 文件
在 components.js 文件引入全部要注册的全局组件
在 main.js 中引入 components.js 文件并使用 Vue.use() 全局注册举例：

组件 diyHeader.vuec++

<template>
    <div>
        <div  id="header" @click="fun"></div>
    </div>
</template>

<script>
export default {
    methods:{
        fun(){
            alert(1);
        }
    }
}
</script>

<style>
#header{
    height: 100px;
    background: red;
}
</style>

复制代码

util下components.js

import DiyHeader from "../components/diyHeader.vue"
export default (Vue)=>{
    Vue.component("DiyHeader", DiyHeader)
  }
复制代码

main.js

import components from "./util/components"
Vue.use(components);
复制代码

以后就能够直接在项目中使用 DiyHeader 这个组件

局部注册

在页面里导入组件而后放到components中就可使用了

import DiyHeader from "../components/diyHeader.vue"
export default {
  name: "App",
  components: { DiyHeader },
}
复制代码

全局注册指令

在 src 文件夹中新建 utils 文件夹，在 utils 文件夹中新建 directives.js 文件
在directives.js文件引入全部要注册的全局指令
在 main.js 中引入 directives.js 文件并使用 Vue.use() 全局注册

directives.js

export default (Vue)=>{
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus();
        }
    })
}
复制代码

main.js

import directives from '@/utils/directives.js'
Vue.use(directives
复制代码

什么是vue生命周期和生命周期钩子函数？

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

vue生命周期钩子函数有哪些？

beforeCreate：

在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用。

created：

在实例建立完成后被当即调用。在这一步，实例已完成如下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：

在挂载开始以前被调用：相关的 render 函数首次被调用。

mounted：

el 被新建立的 vm.el 也在文档内。

beforeUpdate：

数据更新时调用，发生在虚拟 DOM 打补丁以前。这里适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，由于只有初次渲染会在服务端进行。

updated：

因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。

activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁以前调用。在这一步，实例仍然彻底可用。该钩子在服务器端渲染期间不被调用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

errorCaptured（2.5.0+ 新增）

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子能够返回 false 以阻止该错误继续向上传播。

vue等单页面应用及其优缺点

单页Web应用:

就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML、CSS 和 JavaScript，全部的操做都在这张页面上完成，都由 JavaScript 来控制。所以，对单页应用来讲模块化的开发和设计显得至关重要。

单页 Web 应用的优势：

提供了更加吸引人的用户体验：具备桌面应用的即时性、网站的可移植性和可访问性。
单页应用的内容的改变不须要从新加载整个页面，web应用更具响应性和更使人着迷。
单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
单页应用相对服务器压力小，服务器只用出数据就能够，不用管展现逻辑和页面合成，吞吐能力会提升几倍。
良好的先后端分离。后端再也不负责模板渲染、输出页面工做，后端API通用化，即同一套后端程序代码，不用修改就能够用于Web界面、手机、平板等多种客户端。

单页 Web 应用的缺点：

首次加载耗时比较多。
SEO问题，不利于百度，360等搜索引擎收录。
容易形成Css命名冲突。
前进、后退、地址栏、书签等，都须要程序进行管理，页面的复杂度很高，须要必定的技能水平和开发成本高。

自定义指令的几个钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)。
update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前。指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 所有更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

13. Vue双向绑定实现的原理

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

active-class是哪一个组件的属性

vue-router 模块的router-link组件

vue-router有哪几种导航钩子

全局守卫： router.beforeEach
全局解析守卫： router.beforeResolve
全局后置钩子： router.afterEach
路由独享的守卫： beforeEnter
组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

vuex是什么？怎么使用？哪一种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的全部组件的状态，主要是为了多页面、多组件之间的通讯。 Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，经过 Getter暴露给 view层的组件或者页面，页面监测到状态改变因而更新页面。若是你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 可以更好的帮助咱们管理组件外部的状态，通常能够运用在购物车、登陆状态、播放等场景中。

$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

什么是MVVM？

答：MVVM是是Model-View-ViewModel的缩写，Model表明数据模型，定义数据操做的业务逻辑，View表明视图层，负责将数据模型渲染到页面上，ViewModel经过双向绑定把View和Model进行同步交互，不须要手动操做DOM的一种设计思想。

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

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

vue项目优化解决方案

使用mini-css-extract-plugin插件抽离css
配置 optimization 把公共的js代码抽离出来
经过 Webpack 处理文件压缩
不打包框架、库文件，经过cdn的方式引入
小图片使用 base64
配置项目文件懒加载
UI 库配置按需加载
开启 Gzip压缩

Vue路由的实现

hash模式

经过用window.location.hash监听页面的hash值变化，切换对于的内容，hash变化不会重载页面。

history模式

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）能够对浏览器历史记录栈进行修改，以及popState事件的监听到状态变动。

Vue 父子组件通讯

父组件向子组件传值经过props
子组件向父组件传递，子组件使用$emit传递，父组件使用on监听。

Vue minix（混入）的用法

minix（混入）是 Vue 中的高级用法，混入 (mixin) 提供了一种很是灵活的方式，来分发 Vue 组件中的可复用功能。好比咱们作一个下拉加载，不少组件都须要用到下拉加载，咱们就能够把下拉加载封装成一个minix，而后须要下拉加载功能的页面都去导入这个minix，minix里面的属性或者方法就会被混合到当前组件自己的属性上。简单的说，minix B 有个 C方法（下拉加载），页面 A 须要下拉加载因而就导入了 minix B，这时候页面 A 也就拥有了 C 方法。若是页面 A 自己有个 D方法，这时页面 A 就会既有 C 方法也有自己的 D 方法。

关于 Vue.use() 的理解

Vue.use() 是Vue的一个全局注册方法，主要用来注册插件，默认第一个参数是它接受的参数类型必须是Function或者是Object，若是是个对象，必须提供install方法，install方法默认第一个参数为 Vue,其后的参数为注册时传入的arguments。若是是 Function 那么这个函数就被当作 install 方法。同一个插件 Vue.use 会自动阻止屡次注册。除了在注册插件中使用 Vue.use 外，咱们还能够在 directive注册、filters注册、components注册等条件下使用。有的时候咱们会遇到某些时候引入插件是并无使用 Vue.use ，好比使用 axios 的时候，缘由是 axios 没有 install 方法，因此也就不须要使用 Vue.use 来全局注册。

欢迎你们关注个人我的公众号，互联网码农，专一互联网编程技术分享，关注公众号，回复关键字，能够领取系列编程学习视频哦，前端、java、ios、安卓、c++、python应用尽有。