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，直接使用别名就能监听按键的事件。
别名 实际键值
.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修饰符了，如：
v-model="inputName" placeholder="搜索你的文件" @keyup.enter.native="searchFile(params)" > 如果遇到.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; } 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） 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。 单页面的优点： 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。 前后端分离。 页面效果会比较炫酷（比如切换页面内容时的专场动画）。 单页面缺点： 不利于seo。 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。 初次加载时耗时多。 页面复杂度提高很多。 25、什么是vue的计算属性？ 我们己经可以搭建出一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护。 eg: 这里的表达式包含 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变化了，就一定会重新创建这个组件。 方法二：导航守卫 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、 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()构造器。这个构造器需要两个参数