vue面试题

vue-cli工程

1、构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？

node.js 依赖

2、vue-cli 工程常用的 npm 命令有哪些？

npm install; npm run dev; npm run build;

3、请说出vue-cli工程中每个文件夹和文件的用处

1. build文件夹：存放webpack的相关配置以及脚本文件，在实际开发过程中只会偶尔用到webpack.base.conf.js，配置less、babel等编译器

2.config文件夹：常用到此文件夹下 config.js（index.js）配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

3. node_modules：存放npm install命令下载的开发环境和生产环境的各种依赖

4.src文件：工程项目的源码以及资源，包括页面图片、路由组件、路由配置、vuex、入口文件等

4、config文件夹下 index.js 的对于工程开发环境和生产环境的配置

5、请你详细介绍一些 package.json 里面的配置

vue核心知识点

1、对于Vue是一套渐进式框架的理解

2、vue.js的两个核心是什么？

数据驱动、组件系统

3、请问 v-if 和 v-show 有什么区别

v-show:css属性display

v-if是否渲染

4、vue常用的修饰符

.stop：用来阻止单击事件的冒泡
.self：表示当前事件发生在元素本身而不是子元素的时候进行触发
.prevent：表示提交事件不再进行重新加载
.capture：表示事件倾听，在事件发生的时候进行调用

5、v-on可以监听多个方法吗？

可以 <button @click="a(),b()">点我ab</button>

<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来1</button>

6、vue中 key 值的作用

唯一标识更高效的渲染虚拟dom

7、vue-cli工程升级vue版本

npm install -g @vue/cli

8、vue事件中如何使用event对象？

传参 <button v-on:click="click($event, 233)">click me</button>

var app = new Vue({
    el: '#app',
    methods: {
        click(event, val) {
            console.log(typeof event);    // object
        }
    }
});

9、$nextTick的使用

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

10、Vue 组件中 data 为什么必须是函数

类比引用数据类型，Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响

11、v-for 与 v-if 的优先级

v-for优先级更高

12、vue中子组件调用父组件的方法

this.$parent.event

this.$emit

13、vue中 keep-alive 组件的作用

<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中
当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行

14、vue中如何编写可复用的组件？

挂载到原型链上

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

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

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

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

17、vue如何监听键盘事件中的按键？

1 传入e.keycode

2 键盘事件 .enter; .tab; .space; .esc; .delete; .up; .left; .right; .down等

18、vue更新数组时触发视图更新的方法

当你利用索引直接设置一个项时，例如：vm.items[index] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

this.$set()

19、vue中对象更改检测的注意事项

Vue无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' });

this.$set()

20、解决非工程化项目初始化页面闪动问题

页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

21、v-for产生的列表，实现active的切换

:class

22、v-model语法糖的组件中的使用

双向绑定

23、十个常用的自定义过滤器

表单验证方面的抛出就好

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

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
前后端分离
页面效果会比较炫酷（比如切换页面内容时的专场动画）

25、什么是vue的计算属性？

computed

26、vue-cli提供的几种脚手架模板

webpack-simple与webpack展开的，browserify

27、vue父组件如何向子组件中传递数据？

props

28、vue-cli开发环境使用全局常量

29、vue-cli生产环境使用全局常量

30、vue弹窗后如何禁止滚动条滚动？

31、计算属性的缓存和方法调用的区别

1、我们可以将同一函数定义为一个方法或是一个计算属性。两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

2、使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

3、计算属性是根据依赖自动执行的，methods需要事件调用。

32、vue-cli中自定义指令的使用

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

vue-router

1、vue-router如何响应路由参数的变化？

2、完整的 vue-router 导航解析流程

1.导航被触发；

2.在失活的组件里调用beforeRouteLeave守卫；

3.调用全局beforeEach守卫；

4.在复用组件里调用beforeRouteUpdate守卫；

5.调用路由配置里的beforeEnter守卫；

6.解析异步路由组件；

7.在被激活的组件里调用beforeRouteEnter守卫；

8.调用全局beforeResolve守卫；

9.导航被确认；

10..调用全局的afterEach钩子；

11.DOM更新；

12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

3、vue-router有哪几种导航钩子（导航守卫）？

// 路由配置守卫即配置在路由对象中

// 组件实力的导航守卫：beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate

// 全局守卫：beforeEach、beforeResolve、afterEach

// 路由配置守卫：beforeEnter

4、vue-router的几种实例方法以及参数传递

// 第一种 get方法
<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>
this.$route.query.name
// 第二种 post方法
<router-link :to="{path:'/test',push: {name: id}}">跳转</router-link>
this.$route.params.name (页面刷新时会消失)
// 第三种  路由方法
{
    path: 'test/:name?',
    name: 'test',
    component: 'test.vue',
    props: true,
},
props:{name:{required:false,default:''}} （页面刷新不消失，可以在路由配置中设置参数）

5、vue-router的动态路由匹配以及使用

6、vue-router如何定义嵌套路由？

children

7、<router-link></router-link>组件及其属性

to 目标路由 <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录 <router-link :to="{ path: '/abc'}" replace></router-link>

append 设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b <router-link :to="{ path: 'relative/path'}" append></router-link>

tag 有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航 <router-link to="/foo" tag="li">foo</router-link>

active-class 设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置

8、vue-router实现路由懒加载（动态加载路由）

参考官网https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

9、vue-router路由的两种模式

hash、history

10、history路由模式与后台的配合

vuex

1、什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2、使用vuex的核心概念

state getters mutations actions

3、vuex在vue-cli中的应用

store文件夹下创建模块化vuex状态管理机制

4、组件中使用 vuex 的值和修改值的地方？

调用...mapActions()中的方法改变

5、在vuex中使用异步修改

调用...mapActions()中的方法改变

6、pc端页面刷新时实现vuex缓存

localstorage

http请求

1、Promise对象是什么？

Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 promise对象是一个构造函数，用来生成Promise实例；

2、axios、fetch与ajax有什么区别？

axios和ajax都是对XMLHttpRequest对象的封装

fetch是ES6出现的，使用了promise对象，纯原生js

3、什么是JS的同源策略和跨域问题？

同源策略指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。同源是指相同协议、域名、端口

4、如何解决跨域问题？

设置请求头 ACCESS-CONTROL-ALLOW-ORIGIN

5、vue-cli中如何使用JSON数据模拟？

json-sever配置

6、vue-cli中http请求的统一管理。

创建一个文件，把请求方法抛出

7、axios有什么特点？

axios是一个基于promise的HTTP库，支持promise的所有API；

它可以拦截请求和响应；

它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；

它安全性更高，客户端支持防御XSRF；

生产环境

1、vue打包命令是什么？

npm run build

2、vue打包后会生成哪些文件？

dist文件夹

3、如何配置 vue 打包生成文件的路径？

config目录下的index.js中找到build属性配置

4、vue如何优化首屏加载速度？

异步路由加载

不打包库文件

源码剖析

1、vue内部与运行机制：

Vue.js 全局运行机制
响应式系统的基本原理
什么是 Virtual DOM？
如何编译template 模板？
diff算法
批量异步更新策略及 nextTick 原理？
proxy代理？

2、vuex工作原理详解

Vue.mixin
Vue.use
vuex整体思想诞生于flux,可其的实现方式完完全全的使用了vue自身的响应式设计，依赖监听、依赖收集都属于vue对对象Property set get方法的代理劫持。最后一句话结束vuex工作原理，vuex中的store本质就是没有template的隐藏着的vue组件；