面试常考的Vue知识点
一、对于MVVM的理解
MVVM是Model-View-ViewModel的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
View代表UI组件，它负责将数据模型转换成UI 展现出来
ViewModel监听模型数据的改变和控制视图的行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的工作室同步自动的，无需认为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理
二、Vue的生命周期
beforeCreated（创建前）在数据观测和初始化事件还未开始
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（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。
2.1什么是vue生命周期
Vue实例从创建到销毁的过程就是生命周期。从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、销毁等一系列操作就称为vue生命周期
2.2Vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时会更容易形成好的逻辑
2.3生命周期总共有几个阶段？
可以分为八个阶段。创建前后、载入前后、更新前后、销毁前后
2.4第一次页面加载会触发哪几个钩子？
会触发beforeCreate、Created、beforeMount、Mounted
2.5DOM渲染在那个周期中就完成了？
Mounted中就已经完成了
三、Vue实现数据双向绑定的原理：Object.defineProperty()
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式方式，通过Object.defineProperty来劫持各个属性的setter、getter，在数据变动时发布信息给订阅者，触发响应监听回调。当把一个普通JS对象传给VUE实例来作为data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter。用户看不到getter/setter,但是内部会让vue追踪依赖，在属性访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的入口，整和observer、Compile、Watcher三者，通过Observer来监听自己model的数据变化，通过compile来解析编译模板指令（vue中是用来解析{{}})，最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化->数据model变更的双向绑定效果。
四、Vue组件之间参数的传递
父组件向子组件传递值
- 父组件发送的形式是以属性的形式绑定值在子组件身上
- 子组件通过props来接收
- 在props中使用驼峰形式，模板中需要使用短横线的形式
子组件向父组件传值
- 子组件用$emit()来触发事件
- $emit()第一个参数为自定义名称，第二个参数为需要传递的数据
- 父组件用v-on监听子组件的事件
兄弟之间传递数据
- 兄弟之间传递数据需要借助于事件中心，通过事件中心来传递数据（提供事件中心 var hub = new Vue()），这个事件中心相当于中转站，用它来接收事件和传递事件
- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
- 接收数据方，通过mounted(){}钩子中触发hub.$on()方法名
- 销毁事件 通过hub.$off()方法名销毁之后无法进行数据传递
五、Vue的路由实现：hash模式和history模式
hash模式：在浏览器中符号’#’,#以及#后面的字符称为hash，用window.location.hash来读取
特点：hash虽然在URL中，但是不被包括在http请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.xxx.com因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误
history模式：history采用H5新特性，且提供了两个新方法，pushState（）、replaceState（）可以对浏览器记录栈进行修改，以及popState事件的监听到状态变更
history模式下，前端的url必须和实际向后端发起请求的URL一致，如http://www.xxx.com/items/id,后端如果缺少对items/id的路由处理，将返回404错误。**Vue-Router官网里描述：**不过这种模式要玩好，还需要后台配置支持，所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是app依赖的页面
六、Vue和React的区别
相同点:
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后在使用，中心思想相同，都是组件，组件实例之间可以嵌套，都提供合理的钩子函数，可以让开发者定制化地去处理需求，都不内置ajax、Route等核心包而是以插件的方式加载，在组件开发中都支持mixins的特性
不同点:
React才有virtual DOM会对渲染出来的结果做检查，Vue.js在模板中提供了指令，过滤器，可以非常方便，快捷的操作Virtual DOM
七、Vue路由的钩子函数
首页可以控制导航跳转，beforeEach、afterEach，一般用于页面title的修改，一些需要登录才能调整页面的重定向功能
beforeEach主要有三个参数，to、from、next
to：route即将进入的目标路由对象
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子，执行效果依赖next方法的调用参数，可以控制网页跳转
八、vuex是什么？怎么使用？哪种功能场景使用它？
只用来读取的状态集中放在store中，改变状态的方式是提交mutations，这是个同步的事物，异步逻辑应该封装在action中，在main.js中引入store，注入。新建一个目录store，…export。场景有：单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车
state：
Vuex使用单一状态数，即每个应用仅仅包含一个store实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据
mutations：
mutations定义的方法动态修改Vuex的store中的状态或数据
getters：
类似vue中的computed计算属性，主要用来过滤一些数据
action：
actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据，view层通过store.dispatch来分发action
九、对keep-alive的了解
keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免 重新渲染，keep-alive新加入了两个属性，include（包含的组件缓存）、exclude（排除的组件不缓存，优先级大于include）
参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。
十、vue的两大核心是什么
数据驱动：
数据驱动也叫双向数据绑定，ViewModel，保证数据和视图的一致性，利用的是Object.definePropery和存储器属性：getter和setter，可称作为基于依赖收集的观测机制
组件系统
.vue组件的核心选项：
1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系
2、初始数据（data）：一个组件的初始数据状态，对于可复用的组件来说通常是私有状态
3、接收外界的参数（props）：组件之间通过参数来进行数据的传递和共享
4、方法（methods）：对数据改动操作一般在组件的方法内进行
5、生命周期钩子函数：一个组件会触发多个生命周期钩子函数
6、私有资源（assets）：vue.js当中将用户自定义的指令、过滤器组件等成为资源。一个组件可以声明自己的私有资源，私有资源只有该组件和它的组件可以调用
十一、vue中：key的作用
其实不只是vue，react中在执行列表渲染的时候要求给每个组件添加key属性。
要解释key的作用不得不说虚拟DOM的diff算法。
我们知道，vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素，只操作数据便可以更新渲染页面。
- 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构
- 同一层级的一组节点，他们可以通过唯一的id进行区分
当页面的数据发生变化的时候，diff算法只会比较同一层的节点，如果节点类型不同直接干掉前面的节点，在创建新的节点插入，不会在比较以后的子节点了，如果类型相同，则会重新设置该节点的属性，从而实现节点的更新
比如一下这个情况：
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置去插入新的节点。
一句话概括作用就是操作更新虚拟DOM更高效，另外vue在使用相同的标签名元素的时候过度切换会使用到key属性
十二、一句话就能回答的面试题
- css只在当前组件起作用 答：在style标签中写入scoped即可
- v-if和v-show的区别 答：v-if按照条件是否渲染，v-show是display的block或者none
- route和router的区别：route是路由信息对象，包括path、params、hash、query、fullpath、matched等路由信息参数，而router是路由实例对象包含了路由跳转的方法、钩子函数等
- vue的几种常用指令
v-for、v-if、v-bind、v-on、v-show、v-cloak - vue的常用修饰符
.prevent:提交事件不再重载页面；.stop阻止单击事件冒泡，.self当事件发生在该元素本身而不是子元素的时候会触发，.capture事件侦听，事件发生的时候会调用 - v-on可以绑定多个方法吗
可以 - vue中key值的作用
当Vue.js用v-for正在更新已渲染过的元素列表时，它默认“就地复用”，如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据的顺序，而是简单的复用此处的每个元素，并且确保它在特定索引下显示已经被渲染过的每个元素 - 什么是vue的计算属性？
在模板中放入太多的逻辑会让模板过重切难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：
1、使得数据处理结构清晰
2、依赖于数据，数据更新，处理结果自动更新
3、计算属性内部this指向vue实例
4、在template调用时，直接写计算属性名就可以
5、常用的是getter方法，获取数据，也可以使用set方法改变数据
6、相较于methods，不管依赖的数据有没有变化，methods都会重新计算，但是依赖数据不变的时候计算属性computed从缓存中获取，不会重新计算 - vue单页面应用以及优缺点
优点:vue的目标就是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统 。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好
缺点:不支持低版本的浏览器，最低只支持到IE9,不利于SEO的优化（如果要支持SEO,建议通过服务端来渲染组件），首屏加载时间太长，不可以使用浏览器的导航按钮需要自行实现前进、后退 - 怎么定义vue-router的动态路由？怎么获取传过来的值
在router目录下的index,js中对path属性加上/:id，使用router对象的params.id获取
本文地址：https://blog.csdn.net/weixin_43514149/article/details/107579550