共计 10197 个字符，预计需要花费 26 分钟才能阅读完成。
vue-cli
1、vue-cli 工程常用的 npm 命令有哪些？
$ npm install vue-cli //1
$ vue init webpack vue-project //2
$ cd vue-project //3
$ npm install //4
$ npm run dev
2、请说出 vue-cli 工程中每个文件夹和文件的用处
3、config 文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
module.exports => dev => proxyTable 开发时请求代理
module.exports => port 开发时使用端口
module.exports => build => 规定打包后文件的结构以及名称
4、详细介绍一些 package.json 里面的配置
name: 项目名称,
version: 版本号,
description: 项目说明,
author: 作者信息,
dependencies: 开发环境和生产环境都需要的依赖包
devDependencies: 生产环境的依赖包
vue 知识点
1、对于 Vue 是一套渐进式框架的理解 Vue 核心功能是一个视图模板引擎，但不是说 Vue 就不能成为一个框架。可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。这些功能相互独立，可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。这就是“渐进式”，就是 Vue 的使用方式。
2、vue.js 的两个核心是什么？
数据驱动、组件系统。
3、请问 v-if 和 v-show 有什么区别？v-if 判断条件是否渲染，是惰性的，初始渲染时条件为假时什么也不做；v-show 是 display: block/none; 元素始终都会渲染；在项目中如果需要频繁的切换则使用 v -show 较好，运行条件很少改变，则使用 v -if。4、vue 常用的修饰符
.prevent 提交事件不再重载页面;
.stop 阻止单击事件冒泡;
.self 当事件发生在该元素本身而不是子元素时触发;
.capture 添加事件监听器时使用事件捕获模式;
.once 只会触发一次
按键修饰符
:keyup.enter
:keyup.tab
5、v-on 可以监听多个方法吗？可以。6、vue 中 key 值的作用
v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，主要是为了高效的更新虚拟 DOM。
7、vue-cli 工程升级 vue 版本
手动修改 package.json 里面 vue 的版本，同时修改 vue-template-compiler 为相同的版本；后者在 devDependencies 里面，然后 npm install。
8、vue 事件中如何使用 event 对象？@click=”EventName($event)”
9、$nextTick 的使用
在修改数据之后立即使用这个方法，获取更新后的 DOM。
10、Vue 组件中 data 为什么必须是函数
每用一次组件，就会有一个新实例被创建。每个实例可以维护一份被返回对象的独立的拷贝，每个对象都是独立互不影响的。
11、v-for 与 v-if 的优先级
v-for 具有比 v-if 更高的优先级。
v-if 将分别重复运行于每个 v-for 循环中。vue 风格指南提示永远不要把 v-if 和 v-for 同时用在同一个元素上。
12、vue 中子组件调用父组件的方法
第一种：this.$parent.xxx;
第二种：通过 props 传递父组件函数名，子组件接受，接受类型为 Function；
第三种：创建 eventBus。
13、vue 中 keep-alive 组件的作用
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于 include)。
include – 字符串或正则表达式，只有名称匹配的组件会被缓存；
exclude 反之亦然。include=”a,b” :include=”/a|b/” :include=”[‘a’, ‘b’]”
14、vue 中如何编写可复用的组件？
1. 规范化命名：组件的命名应该跟业务无关，而是依据组件的功能命名。
2. 数据扁平化：定义组件接口时，尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处：
(1) 组件接口清晰。
加粗文字 (2) props 校验方便。
(3) 当服务端返回的对象中的 key 名称与组件接口不一样时，不需要重新构造一个对象。
扁平化的 props 能让我们更直观地理解组件的接口。
3. 可复用组件只实现 UI 相关的功能，即展示、交互、动画，如何获取数据跟它无关，因此不要在组件内部去获取数据。
4. 可复用组件应尽量减少对外部条件的依赖。
5. 组件在功能独立的前提下应该尽量简单，越简单的组件可复用性越强。
6. 组件应具有一定的容错性。
15、什么是 vue 生命周期和生命周期钩子函数？
Vue 实例从创建到销毁的过程，就是生命周期。
从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
总共分为 8 个阶段：创建前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 销毁后。让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑。
16、vue 生命周期钩子函数有哪些？
**beforeCreate**（创建前）在数据观测和初始化事件还未开始
**created**（创建后）完成数据观测，属性和方法的运算，初始化事件，$el 属性还没有显示出来;
**beforeMount**（载入前）在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html。注意此时还没有挂载 html 到页面上；
**mounted**（载入后）在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互；
**beforeUpdate**（更新前）在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程；
**updated**（更新后）在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用；
**beforeDestroy**（销毁前）在实例销毁之前调用。实例仍然完全可用；
**destroyed**（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
17、vue 如何监听键盘事件中的按键？
监听 keyup 事件并添加按键修饰符，对一些常用按键 vue 提供了别名，或者使用 keyCode，vue 也支持复合按键。
18、vue 更新数组时触发视图更新的方法
Vue.set(arr, key, value) Vue.set(object, key, value)
19、vue 中对象更改检测的注意事项
Vue 不能检测对象属性的添加或删除；不能动态添加根级别的响应式属性。
使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
20、解决非工程化项目初始化页面闪动问题
vue 页面在加载的时候闪烁花括号 {}}，v-cloak 指令和 css 规则如[v-cloak]{display:none} 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
/*css 样式 */
[v-clock] {
display: none;
}
21、v-for 产生的列表，实现 active 的切换
<ul class=”ul” >
<li v-on:click=”currentIndex = index”
class=”item”
v-bind:class=”{clicked: index === currentIndex}”
v-for=”(items, index) in arr”>
<a>{{items}}</a>
</li>
</ul>
data() {
return{
currentIndex: 0
}
}
22、v-model 语法糖的组件中的使用
1: 用于表单上数据的双向绑定；
2: 修饰符：
.lazy- 取代 input 监听 change 事件
.number- 输入字符串转为数字
.trim- 输入首尾空格过滤
23、十个常用的自定义过滤器
// 全局方法 Vue.filter() 注册一个自定义过滤器
Vue.filter(“sum”, function(value) {
return value + 4;
});
// 局部
new Vue({
el: “.test”,
data: {
message:12
},
filters: {
sum: function (value) {
return value + 4;
}
}
})
24、vue 等单页面应用及其优缺点
优点——数据驱动、组件化、轻量简洁高效，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件；
缺点：不支持低版本的浏览器，不利于 SEO 优化，可以使用服务器端渲染，首次加载耗时长。
25、什么是 vue 的计算属性？
在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
计算属性基于它们的依赖进行缓存的；只在相关依赖发生改变时它们才会重新求值。
31、计算属性的缓存和方法调用的区别
两种方式的最终结果确实是完全相同的。
不同的是计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。
只要相关依赖还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数
如果不希望有缓存，请用方法来替代。
26、vue-cli 提供的几种脚手架模板
vue-cli 的脚手架项目模板有 webpack-simple 和 webpack；
区别在于 webpack-simple 没有包括 Eslint 检查等功能。
27、vue 父组件如何向子组件中传递数据？通过父组件 v -bind 传递数据子组件 props 接收数据
28、vue-cli 开发环境使用全局常量
①少量
Vue.prototype.baseUrl = function () {
return ‘https://segmentfault.com/’;
};
Vue.prototype.getTitle = {
title:”,
isBack: true,
isAdd: false,
};
②配置文件形式
在项目的 src 目录里面 新建一个 lib 目录，lib 目录里创建一个 config.js 文件。
export default {
install(Vue,options) {
Vue.prototype.baseUrl = function () {
return ‘111’;
};
Vue.prototype.getTitle = {
title:”,
isBack: true,
isAdd: false,
};
Vue.prototype.showFootTab = {
isShow:false,
active:0,
}
}
最后导入
import config from ‘./lib/config.js’;
Vue.use(config);
使用
<template>
<div>
{{getTitle.title}}
</div>
</template>
this.getTitle
29、vue-cli 生产环境使用全局常量
30、vue 弹窗后如何禁止滚动条滚动？
/*** 滑动限制 ***/
stop(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow=’hidden’;
document.addEventListener(“touchmove”,mo,false);// 禁止页面滑动
},
/*** 取消滑动限制 ***/
move(){
var mo=function(e){e.preventDefault();};
document.body.style.overflow=”;// 出现滚动条
document.removeEventListener(“touchmove”,mo,false);
}
// 如果不是 Vue，可以直接给 html 设置 overflow：hidden
32、vue-cli 中自定义指令的使用
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}![图片描述][1]
}
}
Vue.directive(‘color-swatch’, function (el, binding) {
el.style.backgroundColor = binding.value
})
vue-router
1、vue-router 如何响应 路由参数 的变化？
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。同时意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
watch: {
‘$route’ (to, from) {
// 对路由变化作出响应 …
}
}
2、完整的 vue-router 导航解析流程
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
3、vue-router 有哪几种导航钩子（导航守卫）？
全局的, 单个路由独享的, 组件级的。
全局守卫：
router.beforeEach router.beforeResolve(2.5+) router.afterEach
const router = new VueRouter({…})
router.beforeEach((to, from, next) => {
// …
})
router.afterEach((to, from) => {
// 这些钩子不会接受 next 函数也不会改变导航本身：…
})
路由独享的守卫：beforeEnter 这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({
routes: [
{
path: ‘/foo’,
component: Foo,
beforeEnter: (to, from, next) => {
// …
}
}
]
})
组件内的守卫
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
template: `…`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
4、vue-router 的几种实例方法以及参数传递
编程式导航
this.$router.push({name: ‘news’, params: { userId: 123}}); // this.$route.params.userId
this.$router.push({path: ‘/news’, query: { userId: 123}}); // this.$route.query.userId
this.$router.replace();
声明式导航
<router-link :to=”{name: ‘news’, params: { userId: 1111}}”>click to news page</router-link>
<router-link :to=”{path: ‘/news’, query: { userId: 1111}}”>click to news page</router-link>
5、vue-router 的动态路由匹配以及使用
需要把某种模式匹配到的所有路由，全都映射到同个组件
const User = {
template: ‘<div>User{{$route.params.id}}</div>’
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{path: ‘/user/:id’, component: User}
]
})
复用组件时，想对路由参数的变化作出响应的话，使用 watch (监测变化) $route 对象
watch: {
‘$route’ (to, from) {
// 对路由变化作出响应 …
}
}
想匹配任意路径，我们可以使用通配符 (*)
{
// 会匹配所有路径
path: ‘*’
}, {
// 会匹配以 `/user-` 开头的任意路径
path: ‘/user-*’
}
6、vue-router 如何定义嵌套路由？
在 router.js 使用 children 数组来定义子路由，并在模板中使用 <router-view> 定义嵌套路由。
如果没有匹配到合适的子路由，可以提供一个 空的 子路由
routes: [
{
path: ‘/user/:id’, component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{path: ”, component: UserHome},
// … 其他子路由
]
}
]
7、<router-link></router-link> 组件及其属性
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。
通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。
to:
<!– 字符串 –>
<router-link to=”home”>Home</router-link>
<!– 渲染结果 –>
<a href=”home”>Home</a>
<!– 使用 v-bind 的 JS 表达式 –>
<router-link v-bind:to=”‘home'”>Home</router-link>
<!– 不写 v-bind 也可以，就像绑定别的属性一样 –>
<router-link :to=”‘home'”>Home</router-link>
<!– 同上 –>
<router-link :to=”{path: ‘home’}”>Home</router-link>
<!– 命名的路由 –>
<router-link :to=”{name: ‘user’, params: { userId: 123}}”>User</router-link>
<!– 带查询参数，下面的结果为 /register?plan=private –>
<router-link :to=”{path: ‘register’, query: { plan: ‘private’}}”>Register</router-link>
replace: 会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
<router-link :to=”{path: ‘/abc’}” replace></router-link>
append: 在当前 (相对) 路径前添加基路径
tag: 渲染成某种标签
active-class: 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
8、vue-router 实现路由懒加载（动态加载路由）
component: () => import(‘comp/AlbumlibMore’)
9、vue-router 路由的两种模式
vue-router 默认 hash 模式
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
HTML5 History 模式
充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
要玩好，还需要后台配置支持；
因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404
10、history 路由模式与后台的配合
在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面；然后在给出一个 404 页面。
vuex
1、什么是 vuex？
专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
读取的状态集中放在 store 中；改变状态的方式是提交 mutations，这是个同步的事物；异步逻辑应该封装在 action 中。
在 main.js 引入 store，注入。新建了一个目录 store，export。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
2、使用 vuex 的核心概念
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹 mutations，使之可以异步。
modules => 模块化 Vuex
(2019.03.26)3、vuex 在 vue-cli 中的应用
4、组件中使用 vuex 的值和修改值的地方？
5、在 vuex 中使用异步修改
6、pc 端页面刷新时实现 vuex 缓存
http 请求
1、Promise 对象是什么？
2、axios、fetch 与 ajax 有什么区别？
3、什么是 JS 的同源策略和跨域问题？
4、如何解决跨域问题？
5、vue-cli 中如何使用 JSON 数据模拟？
6、vue-cli 中 http 请求的统一管理。
7、axios 有什么特点？
UI 样式
1、.vue 组件的 scoped 属性的作用
2、如何让 CSS 只在当前组件中起作用？
3、vue-cli 中常用的 UI 组件库
4、如何适配移动端？【经典】
5、移动端常用媒体查询的使用
6、垂直居中对齐
7、vue-cli 中如何使用背景图片？
8、使用表单禁用时移动端样式问题
9、多种类型文本超出隐藏问题
常用功能
1、vue 中如何实现 tab 切换功能？
2、vue 中如何利用 keep-alive 标签实现某个组件缓存功能？
3、vue 中实现切换页面时为左滑出效果
4、vue 中父子组件如何相互调用方法？
5、vue 中央事件总线的使用
混合开发
1、vue 如何调用 原生 app 提供的方法？
2、原生 app 调用 vue 提供的方法，并将值传递到 .vue 组件中
生产环境
1、vue 打包命令是什么？
2、vue 打包后会生成哪些文件？
3、如何配置 vue 打包生成文件的路径？
4、vue 如何优化首屏加载速度？
MVVM 设计模式
1、MVC、MVP 与 MVVM 模式
2、MVC、MVP 与 MVVM 的区别
3、常见的实现 MVVM 几种方式
4、Object.defineProperty()方法
5、实现一个自己的 MVVM（原理剖析）
6、ES6 中类和定义
7、JS 中的文档碎片
8、解构赋值
9、Array.from 与 Array.reduce
10、递归的使用
11、Obj.keys()与 Obj.defineProperty
12、发布 - 订阅模式
13、实现 MVVM 的思路分析
源码剖析
1、vue 内部与运行机制：
Vue.js 全局运行机制
响应式系统的基本原理
什么是 Virtual DOM？
如何编译 template 模板？
diff 算法
批量异步更新策略及 nextTick 原理？
proxy 代理？
2、vuex 工作原理详解
Vue.mixin
Vue.use
深入拓展
1、vue 开发命令 npm run dev 输入后的执行过程
2、vue 的服务器端渲染
3、从零写一个 npm 安装包
4、vue-cli 中常用到的加载器
5、webpack 的特点
