Vue基础知识及面试经常使用问题

1 对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写

1 Model 表明数据模型，也能够在Model中定义数据修改和操做的业务逻辑。
2 View 表明UI 组件，它负责将数据模型转化成UI 展示出来。
3 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，链接Model和View

1 在MVVM架构下，View和 Model 之间并无直接的联系，而是经过ViewModel进行交互，Model和 ViewModel 之间的交互是双向的， 所以View 数据的变化会同步到Model中，
而Model 数据的变化也会当即反应到View 上。
2 ViewModel 经过双向数据绑定把 View 层和 Model层链接了起来，而View和 Model 之间的同步工做彻底是自动的，无需人为干涉，所以开发者只需关注业务逻辑，
不须要手动操做DOM，不须要关注数据状态的同步问题，复杂的数据状态维护彻底由 MVVM 来统一管理

2 请详细说下你对vue生命周期的理解

答：总共分为8个阶段建立前/后，载入前/后，更新前/后，销毁前/后

1 建立前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el尚未
2 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但仍是挂载以前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
3 更新前/后：当data变化时，会触发beforeUpdate和updated方法
4 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，可是dom结构依然存在

什么是vue生命周期？

1 答： Vue 实例从建立到销毁的过程，就是生命周期。从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

vue生命周期的做用是什么？

1 答：它的生命周期中有多个事件钩子，让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

vue生命周期总共有几个阶段？

1 答：它能够总共分为8个阶段：建立前/后、载入前/后、更新前/后、销毁前/销毁后。

第一次页面加载会触发哪几个钩子？

1 答：会触发下面这几个beforeCreate、created、beforeMount、mounted 。

DOM 渲染在哪一个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了

3 Vue实现数据双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，
经过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来做为它的 data 选项时，Vue 将遍历它的属性，
用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，可是在内部它们让 Vue追踪依赖，
在属性被访问和修改时通知变化。 vue的数据双向绑定 将MVVM做为数据绑定的入口，整合Observer，Compile和Watcher三者
，经过Observer来监听本身的model的数据变化，经过Compile来解析编译模板指令（vue中是用来解析 {{}}），
最终利用watcher搭起observer和Compile之间的通讯桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变动双向绑定效果。 #

4 Vue组件间的参数传递

父组件与子组件传值

父组件传给子组件：子组件经过props方法接受数据；

子组件传给父组件： $emit 方法传递参数

props相关资料连接:https://www.jb51.net/article/143049.htm

非父子组件间的数据传递，兄弟组件传值

eventBus，就是建立一个事件中心，至关于中转站，能够用它来传递事件和接收事件。项目比较小时，用这个比较合适（虽然也有很多人推荐直接用VUEX，具体来讲看需求）

5 Vue的路由实现：hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特色：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动做，对服务端安全无用，hash不会重加载页面。
history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()能够对浏览器历史记录栈进行修改，以及popState事件的监听到状态变动 #

6 vue路由的钩子函数

首页能够控制导航跳转，beforeEach，afterEach等，通常用于页面title的修改。一些须要登陆才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next。
to：route即将进入的目标路由对象。
from：route当前导航正要离开的路由。
next：function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转
#

7 vuex是什么？怎么使用？哪一种功能场景使用它？

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，… export
场景有：单页应用中，组件之间的状态、音乐播放、登陆状态、加入购物车

state：Vuex 使用单一状态树,即每一个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不能够直接修改里面的数据。
mutations：mutations定义的方法动态修改Vuex 的 store 中的状态或数据
getters：相似vue的计算属性，主要用来过滤一些数据。
action：actions能够理解为经过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操做数据。view 层经过 store.dispath 来分发 action

modules：项目特别复杂的时候，可让每个模块拥有本身的state、mutation、action、getters，使得结构很是清晰，方便管理

8 v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；
#

9 $route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

10 如何让CSS只在当前组件中起做用?

将当前组件的<style>修改成<style scoped>

11 <keep-alive></keep-alive>的做用是什么?

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免从新渲染

好比有一个列表和一个详情，那么用户就会常常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，
那么就能够对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是从新渲染

12 在Vue中使用插件的步骤

采用ES6的import ... from ...语法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,能够传入一个选项对象Vue.use(MyPlugin, { someOption: true })

13 请列举出3个Vue中经常使用的生命周期钩子函数?

created: 实例已经建立完成以后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段尚未开始, $el属性目前还不可见
mounted: el被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted被调用时 vm.$el 也在文档内。
activated: keep-alive组件激活时调用