1、对于Vue是一套渐进式框架的理解
2、vue.js的两个核心是什么？
3、请问 v-if 和 v-show 有什么区别
4、vue常用的修饰符
5、v-on可以监听多个方法吗？
6、vue中 key 值的作用
7、vue-cli工程升级vue版本
8、vue事件中如何使用event对象？
9、$nextTick的使用
10、Vue 组件中 data 为什么必须是函数
如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。
11、v-for 与 v-if 的优先级
12、vue中子组件调用父组件的方法
13、vue中 keep-alive 组件的作用
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相 似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
作用 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
14、vue中如何编写可复用的组件？
15、什么是vue生命周期？
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例 。
16、vue生命周期钩子函数有哪些？
17、vue如何监听键盘事件中的按键？
在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。
keyCode 实际键值
48到57 0到9
65到90 a到z（A到Z）
112到135 F1到F24
8 BackSpace（退格）
9 Tab
13 Enter（回车）
20 Caps_Lock（大写锁定）
32 Space（空格键）
37 Left（左箭头）
38 Up（上箭头）
39 Right（右箭头）
40 Down（下箭头）
参考：JavaScript 获取键盘事件(键盘某个按键被按下)
方案
在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。
<input @keyup.enter="function">
别名 实际键值
.delete delete（删除）/BackSpace（退格）
.tab Tab
.enter Enter（回车）
.esc Esc（退出）
.space Space（空格键）
.left Left（左箭头）
.up Up（上箭头）
.right Right（右箭头）
.down Down（下箭头）
.ctrl Ctrl
.alt Alt
.shift Shift
.meta (window系统下是window键，mac下是command键)
另外，Vue中还支持组合写法：
组合写法 按键组合
@keyup.alt.67=”function” Alt + C
@click.ctrl=”function” Ctrl + Click
参考：vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
注意
但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如：
<el-input
v-model="inputName"
placeholder="搜索你的文件"
@keyup.enter.native="searchFile(params)"
>
</el-input>
如果遇到.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档
18、vue更新数组时触发视图更新的方法
直接修改数组元素是无法触发视图更新的，如
this.array[0] = {
name: 'meng',
age: 22
}
修改array的length也无法触发视图更新，如
this.array.length = 2;
触发视图更新的方法有如下几种
1. Vue.set
可以设置对象或数组的值，通过key或数组索引，可以触发视图更新
数组修改
Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)
对象修改
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)
2. Vue.delete
删除对象或数组中元素，通过key或数组索引，可以触发视图更新
数组修改
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
对象修改
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)
3. 数组对象直接修改属性，可以触发视图更新
this.array[0].show = true;
this.array.forEach(function(item){
item.show = true;
});
4. splice方法修改数组，可以触发视图更新
this.array.splice(indexOfItem, 1, newElement)
5. 数组整体修改，可以触发视图更新
var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;
6. 用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新
//Object.assign的单层的覆盖前面的属性，不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})
//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})
//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})
7.Vue提供了如下的数组的变异方法，可以触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
19、vue中对象更改检测的注意事项（同18的答案）
20、解决非工程化项目初始化页面闪动问题
v-cloak解决刷新或者加载出现闪烁
/*css样式*/
[v-cloak] {
display: none;
}
<!--html代码-->
<divid="app"v-cloak><ul><liv-for="item in tabs">{{item.text}}</li></ul></div
21、v-for产生的列表，实现active的切换
22、v-model语法糖的组件中的使用
1）v-model指令是什么?
vue通过v-model实现双向绑定数据，所以首先我们要明白v-model在这个过程中做了什么。
（2）v-model指令本质？
有vue基础的同学应该知道，v-model本质是一个语法糖。
即v-bind和v-on的结合体。
（3）v-model本质验证
表单元素比如input，v-bind绑定一个值，就把data数据传给了value，同时再通过v-on监听input事件，当表单数据改变的时候，也会把值传给data数据，代码如下
23、vue中自定义过滤器
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，过滤器通常会使用管道标志 “ | ”。使用:
{{item.ctime | dataFormat('yyyy-mm-dd')}}
定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
私有局部过滤器：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
24、vue等单页面应用及其优缺点
单页面应用（SPA）
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。
前后端分离。
页面效果会比较炫酷（比如切换页面内容时的专场动画）。
不利于seo。
导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
初次加载时耗时多。
页面复杂度提高很多。
25、什么是vue的计算属性？
我们己经可以搭建出一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护。
eg:
<div>{{text.split(’,’)•reverse().join(’,’)}}</div>
这里的表达式包含 3 个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用 计算属性
所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。
计算属性用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以
计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新
计算属性缓存
调用methods里的方法也可以与计算属性起到同样的作用
方法methods： 如果是调用方法，只要页面重新渲染。方法就会重新执行
计算属性computed：不管渲染不渲染，只要计算属性依赖的数据未发生变化，就永远不变
结论: 没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用methods就可以实现，那么为什么还需要计算属性呢？
原因就是:
计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text 只要不改变，计算属性也就不更新
何时使用: -----------使用computed还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
26、vue-cli提供的几种脚手架模板
27、vue父组件如何向子组件中传递数据？
28、vue弹窗后如何禁止滚动条滚动？
29、计算属性的缓存和方法调用的区别
30、vue-cli中自定义指令的使用
Vue核心知识点
vue-router
1、vue-router如何响应 路由参数 的变化？
什么是路由参数的变化
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
监测路由参数变化的方法（watch监听|导航守卫）
方法一watch监听：
watch: { // watch的第一种写法
$route (to, from) {
console.log(to)
console.log(from)
}
},
watch: { // watch的第二种写法
$route: {
handler (to, from){
console.log(to)
console.log(from)
},
// 深度观察监听
deep: true
}
},
watch: { // watch的第三种写法
'$route':'getPath'
},
methods: {
getPath(to, from){
console.log(this.$route.path);
}
},
----------------------------------------------------------------
举例：
watch: {
// 方法1 //监听路由是否变化
'$route' (to, from) {
if(to.query.id !== from.query.id){
this.id = to.query.id;
this.init();//重新加载数据
}
}
}
//方法 2 设置路径变化时的处理函数
watch: {
'$route': {
handler: 'init',
immediate: true
}
为了实现这样的效果可以给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。
<router-view :key="$route.fullpath"></router-view>
方法二：导航守卫
beforeRouteEnter (to, from, next) {
console.log('beforeRouteEnter被调用：在渲染该组件的对应路由被 confirm 前调用')
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this` 因为当守卫执行前，组件实例还没被创建
// 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
next(vm => {
// 通过 `vm` 访问组件实例
console.log(vm)
})
},
// beforeRouteEnter 是支持给 next 传递回调的唯一守卫。
// 对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log('beforeRouteUpdate被调用：在当前路由改变，但是该组件被复用时调用')
next()
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
const answer = window.confirm('是否确认离开当前页面')
if (answer) {
console.log('beforeRouteLeave被调用：导航离开该组件的对应路由时调用')
next()
} else {
next(false)
}
},
2、完整的 vue-router 导航解析流程
3、vue-router有哪几种导航钩子（ 导航守卫 ）？
4、vue-router传递参数的几种方式
5、vue-router的动态路由匹配
6、vue-router如何定义嵌套路由？
7、<router-link></router-link>组件及其属性
8、vue-router实现路由懒加载（ 动态加载路由 ）
9、vue-router路由的两种模式
10、history路由模式配置及后台配置
vue-router
CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结，点击这里可免费领取！
vuex
1、什么是vuex？
2、使用vuex的核心概念
3、vuex在vue-cli中的应用
4、在vue中使用vuex，修改state的值
5、vuex actions异步修改状态
vuex
http请求
1、Promise对象是什么？
2、axios、fetch与ajax有什么区别？
3、什么是JS的同源策略和跨域问题？
4、如何解决跨域问题？
5、axios有什么特点？
http请求
UI样式
1、.vue组件的scoped属性的作用
2、如何让CSS只在当前组件中起作用？
3、vue-cli中常用的UI组件库
4、如何适配移动端？【 经典 】
5、移动端媒体查询
6、vue内容垂直和水平居中
7、vue-cli引入图片的方法
8、移动端常见样式问题
9、文本超出隐藏
UI样式
常用功能
1、vue中如何实现tab切换功能？
2、vue中keep-alive 实现标签页组件缓存
3、vue中实现页面从右往左侧滑入效果
4、vue中父子组件如何相互调用方法？
5、vue中央事件总线的使用
常用功能
MVVM设计模式
1、MVC、MVP与MVVM模式
2、MVC、MVP与MVVM的区别
3、MVVM的实现原理
4、Object.defineProperty()方法
5、 ES6中定义的类和对象
6、JS中的文档碎片
7、解构赋值
8、Array.from
9，Array.reduce
10、递归的使用
11、Obj.keys()与Obj.defineProperty
12、发布-订阅模式
13、vue项目优化，缩短首屏加载时间
MVVM设计模式
深入拓展
1、vue开发命令 npm run dev 输入后的执行过程
2、vue的服务器端渲染
3、从零写一个npm安装包
4、vue-cli中常用到的加载器
5、webpack的特点
定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。
定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。
定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数
