关于vue面试知识点汇总，附答案
1，说下vue的双向绑定数据的原理？
答：vue实现数据双向绑定主要是采用数据劫持结合“发布者-订阅者”模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。
2，解释单项数据流和双向数据绑定？
答：单向数据流：顾名思义数据流是单向的，数据流动的方向可以跟踪，流动单一，追查问题的时候可以更快捷，缺点就是写起来不太方便，要使用ui发生变更就必须创建各种action来维护对应的state。
双向数据流：数据之间是相同的，将数据变更的操作隐藏在框架内部，优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点是无法追踪局部状态的变化，增加了出错是debug的难度。
3，vue如何去除url中的#？
答：vue-router默认使用的hash模式，所以在路由加载的时候，项目中的url会自带“#”，如果不想使用“#”，把路由模式改成history模式就可以了。
4，对MVC和MVVM的理解？
答：MVC特点：所有通信都是单向的
a，View传送指令到controller
b，controller完成业务逻辑后，要求Model改变状态
c，Model将新的数据发送到View，用户得到反馈
MVVM分为Model，View，ViewModel三者，Model代表数据模型，数据和业务逻辑都在Model层中定义。View代表UI视图，负责数据的展示。ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。Model和View并无直接的关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系，因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步
5，vue生命周期的理解？
答：创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化，在created阶段，vue实例的数据对象data有了，$el还没有
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化，但还是挂载之前为虚拟dom节点，data.message还未替换，在mounted阶段，vue实例挂载完成，data。message成功渲染。
更新前/后：当data变化时，会触发beforeUpdata和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实列已经解除事件监听以及和dom的绑定，但是dom结构依然存在
6，$route和$router的区别？
答：$router为VueRouter实例。想要导航到不同的url，可以使用$router.push方法。
$route为当前router跳转对象里面可以获取name，path，query，params等
7，NextTick是做什么的？
答：$nextTick是在下一次DOM更新循环结束之后执行的延迟回调，在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM。
8，vue组件data为什么必须是函数？
答：因为js本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中一个属性时，会影响到所有的vue实列的数据，如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响。
9，计算属性computed和事件methods有什么区别？
答：computed，计算属性时基于他们的依赖进行缓存的，只有在他的相关依赖发生改变时才会重新求职。
methods,只要调用，就会重新渲染。
10，vue等单页面应用的优缺点？
答：优点：良好的交互体验，良好的前后端工作分离模式，减轻服务器压力
缺点：SEO难度较高，前进后退管理，初次加载耗时多
11，简述vue的响应式原理？
答：当一个vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将他们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化，每一个组件实例都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而使他关联的组件得以更新。
12，delete和vue.delete删除数组的区别？
答：delete只是被删除的元素变成了empty/undefined其他元素的键值还是不变。
Vue.delete直接删除了数组，改变了数组的键值
13，vue的有点是什么？
答：低耦合，视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当view变化的时候Model可以不变，当Model变化的时候view也可以不变化，
可重用性，可以把一些视图逻辑放在一个viewModel里面，让很多view重用这段视图逻辑
独立开发，开发人员可以更专注业务逻辑和数据的开发，设计人员可以专注于页面的设计
可测试，界面素来是难于测试的，而现在测试可以针对ViewModel来写
14，vue如何实现按需加载配合webpack设置？
答：webpack中提供了require.ensure()来实现按需加载，以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。
不进行页面按需加载引入方式：import home from './common/home.vue
进行页面的按需加载的引入方式：const home=r=>require.ensure([],()=>r(require('./commom/home.vue')))
15,vuex是什么？怎么使用，那种功能场景使用它？
答：vue框架中状态管理，在main.js中引入store，注入，新建一个目录store，……export，场景有单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车等
16，vuex有哪几种属性？
答：state，getter,Mutation,Action,Module
vuex中的state特性：a，vuex就是一个仓库，仓库里面放了很多对象，其中state就是数据源存放地，对应于一般vue对象里面的data。
b，state里面存放的数据都是响应式的，vue组件从store中读取数据，若是shore中的数据发生改变，依赖这个额数据的组件也会发生更新
c，他通过mapState把全局的state和getters映射当前组件computed计算属性中
vuex的Getter特性： a，getters可以对State进行计算操作，他就是store的计算属性
b，虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用
c，如果一个状态只在一个组件内使用，是可以不用getters
vuex的Mutation特性：Action类似mutation，不同的是，action提交的是mutation，而不是直接更改状态，action异步操作
17，vue-router有哪几种导航钩子？
答：全局导航:beforeEach(to,from,next),跳转前进行拦截， afferEach(to,from)
组件内导航：beforeRouteEnter， beforeRouteUpdata，beforeRouteLeave
18，vue组件异步加载的方法？
答：第一种，使用()=>import()
第二种，使用resolve=>require(['./home'],resolve)
第三种，require.ensure([’./tab0.vue’], () => { resolve(require(’./tab0.vue’)) }, ‘tab0’）
19，node.js搭建一个简单的服务器？
const http = require('http');
http.createServer((req, res) => {
// 设置请求头
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
res.end('hello node');
}).listen(8888, () => {
console.log('服务已经启动');
})
20，请介绍一个vue的侦听器？
答： 侦听器是用来检测数据变化从而添加自己的逻辑的代码，跟计算属性很像。watch。当发现侦听器无法侦听对象中的属性的时候，在watch中加上deep:true开始深度侦听，此时就可以侦听对象中属性的变化，深度侦听特别消耗性能，慎用。
21，什么是vue-cli?
答：vue-cli 是一个专门为单页面应用快速搭建繁琐的脚手架，可以轻松的创建新的应用程序而且自动生成vue.js和webpack模版。
22，在vue中，有几个生命周期钩子和keep-alive元素有关？
答：当引入keep-alive，页面第一次进入，钩子的触发顺序是created->mounted->activated，退出时只触发deactivated，再次进入，只会触发activated
23，在vue渲染模版时，如何才能保留模版中的html注释？
答：在官网有说，comments当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
24，在vue中，当数据对象的属性和methods选项中的方法同名时，会怎么样？
答：会报错。名字不能重复
25，为什么要避免同时使用v-for和v-if？
答：v-for比v-if的优先级高，一般会采用computed计算属性
26，vue事件绑定方式相比于传统的DOM方式有那些优势？
27，vue中元素的key特性有什么作用？
答：主要是为了高效，准确的更新虚拟dom。
28，请列举所知的v-on指令的修饰符？
答：.stop：阻止事件冒泡
.self：当事件在该元素本身触发时才触发事件
.capture：事件捕获
.prevent：阻止默认事件
.once ：事件只触发一次
29，vue为v-model指令提供了那些修饰符？
答：.lazy:懒加载
.number:转为数字类型
.trim:过滤首尾空格
30，vue的class可接收哪几种类型？
答：对象，数组
31，vue的：style可接收哪几种类型值？
答：对象，数组
32，什么是vue的单文件组件？如何使用？
答：.vue文件称为单文件组件，是一种文件格式，主要包含<template><style><sript>
33,Vue.extend()方法有什么作用？
答：组件构造器
34，在vue中，组件命名方式有那些？
答：驼峰和短横线
35，组件的props能校验那些值类型？
答：String，Number，Boolean，Function，Object，Array，Symbol
36，<keep-alive>元素有什么作用？
答：keep-alive是vue内置的一个组件，缓存，有两个属性，include，包含，exclude不包含，
37，.native修饰符有什么作用？
答：作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
38，.sync修饰符有什么作用？
答：
39，在vue中如何直接访问父组件，子组件和根实例？
答：访问父组件$parent,访问子组件$children,访问根实例$root
40，vue中ref和$refs有什么作用？
答：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
41，请谈下对slot元素的理解？
答：slot插槽，分为匿名插槽，具名插槽，作用域插槽，
匿名插槽：无name属性，在组件中只可以使用一次，父组件提供样式和内容
具名插槽：有name属性，在组件中可以用多次，父组件可以通过html模板上slot关联具名插槽
作用域插槽：父组件提供样式，子组件提供提供内容，在slot上绑定数据，子组件的值可以传给父组件使用，父组件展示子组件有三种，flex显示，列表显示，直接显示，使用slot-scope必须使用template。scope返回值是slot标签上放回所有属性值，并且是一个对象形式保存起来的，slot有两个属性，一个row，一个index
42，如何理解vue的函数式组件？
答：
函数式组件特点：
- 没有管理任何状态
- 没有监听任何传递给它的状态
- 没有生命周期方法
- 它只是接收一些prop的函
我们将这样的组件标记为functional：
- 无状态 == 无响应式数据
- 无实例 == 无this上下文
函数式组件的优点：
渲染开销低，因为函数式组件只是函数；
写法：
{ functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ... } }
组件需要的一切都是通过 context 参数传递，它是一个包含如下字段的对象：
- props: 提供所有prop的对象
- children:VNode 子节点的数组
- slots: 一个函数，返回了包含所有插槽的对象
- scoptedSlots:(2.6.0) 一个暴露传入的作用域插槽的对象，也以函数形式暴露普通插槽
- data:传递个组件的整个 数据对象 ，作为createElement的第二个参数传入组件
- parent:对父组件的引用
- listeners:(2.3.0+) 一个包含了：所有父组件为当前组件祖册的事件监听器对象，是data.on的一个别名
- injections:(2.3.0+) 如果使用了inject选项，则改对象包含了：应当被注入的属性；
43，在vue中什么是插件，怎么使用？
答：npm install 插件名
44，如何在vue-router中配置404页面？
答：在路由配置的最后放个*
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/newDetail', name: 'newDetail', component: na }, { path: '*', name: 'notfount', component: notfount } ] })
45，如何在vue-router中切换路由时，保持原先的滚动位置？
答：
1.router文件中设置为 mode: 'history', 模式 2.router设置 scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } 3.详情页返回列表页时， 用 history.back() 返回
//hash模式 // list页route中的data钩子 route : { data : function () { var _this = this; // 返回同一个位置 var scrollTop = sessionStorage.getItem("scrollTop"); if (scrollTop) { _this.$nextTick(function () { $(".abuild-record-layout").scrollTop(scrollTop); }); } } }
46，如何实现路由懒加载？
答：有三种，第一种，
const hyh=resolve=>{ import('@/components/hyh').then(module=>{resolve(module)}) } 正常引入 const router = new Router({ routes: [ { path: '/hyh', component: hyh, name: 'hyh' } ] })
第二种，
const router = new Router({ routes: [ { path: '/index', component: (resolve) => { require(['../components/index/index'], resolve) // 这里是你的模块 不用import去引入了 } } ] })
第三种
// r就是resolve const list = r => require.ensure([], () => r(require('../components/list/list')), 'list'); // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 const router = new Router({ routes: [ { path: '/list/blog', component: list, name: 'blog' } ] })
47，什么是导航守卫？
48，有几种路由模式？
答：hash和history模式。
49，如何重用vuex模块？
50，如何开启vuex严格模式？有什么作用？
答：开启严格模式，仅需在创建 store 的时候传入strict: true
const store = new Vuex.Store({ state, strict:true//开启严格模式后，只能通过mutation来改变状态（不支持异步）否则会报错 })
严格模式下，不是有mutation函数引起的状态变化都会抛出错误
注意：发布环境下不要开启严格模式
严格模式会深度监测状态树来检测不合规的状态变化，造成不必要的性能损失
51，vue中为什么要求在组件的模版中只能有一个根元素？
组件需要的一切都是通过 context 参数传递，它是一个包含如下字段的对象：
- props: 提供所有prop的对象
- children:VNode 子节点的数组
- slots: 一个函数，返回了包含所有插槽的对象
- scoptedSlots:(2.6.0) 一个暴露传入的作用域插槽的对象，也以函数形式暴露普通插槽
- data:传递个组件的整个 数据对象 ，作为createElement的第二个参数传入组件
- parent:对父组件的引用
- listeners:(2.3.0+) 一个包含了：所有父组件为当前组件祖册的事件监听器对象，是data.on的一个别名
- injections:(2.3.0+) 如果使用了inject选项，则改对象包含了：应当被注入的属性；
