vue鸭题宝典

Vue

一、对于 MVVM 的理解？

Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。

View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为处理用户交互，就是一个连接 Model 和 View 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、Vue 的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始

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（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

1.什么是 vue 生命周期？

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

2.vue 生命周期的作用是什么？

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

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

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

三、 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 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input） —>数据 model 变更双向绑定效果。

四、Vue 组件间的参数传递

1.父组件与子组件传值

父组件传给子组件：子组件通过 props 方法接受数据;

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

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

eventBus，就是一个事件中心，相当于中转站。项目比较小时，用这个比较合适。

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

hash **模式：**在浏览器中符号“#”，#以及#后面的字符称之为 hash，用window.location.hash 读取；

特点：hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用，hash 不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，

如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history **模式：**history 采用 HTML5 的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，

如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回404 错误。需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依

赖的页面。”

六、Vue 与 React 的区别？

2.与React 的区别

相同点：

React 采用特殊的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 特殊文件格式，两者都需要编译后使用；

中心思想相同：

一切都是组件，组件实例之间可以嵌套；

都提供合理的钩子函数，可以让开发者定制化地去处理需求；

都不内置列数 AJAX，Route 等功能到核心包，而是以插件的方式加载；

在组件开发中都支持 mixins 的特性。

不同点：

React 采用的 Virtual DOM 会对渲染出来的结果做diff 对比；

Vue.js 在模板中提供了指令，过滤器等，可以非常方便，快捷地操作 Virtual DOM。

七、vue 路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach 等，一般用于页面 title 的修改。一些需要登录才能调整页面的重定向功能。

beforeEach 主要有 3 个参数 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 的计算属性，主要用来过滤一些数据。

action

actions就是异步操作数据。view 层通过 store.dispath 来分发 action。

modules

项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、getters,使得结构非常清晰，方便管理。

九、vue-cli 如何新增自定义指令？

1.创建局部指令

2.全局指令

3.指令的使用

十、vue 如何自定义一个过滤器？

全局定义过滤器

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg 的 值作为第一个参数。

十一、对 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

keep-alive 两个属性: include 与exclude。

include - 字符串或正则表达式，只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存

十二、一句话就能回答的面试题

3.$route和$router 的区别

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

4.vue.js 的两个核心是什么？

答：数据驱动、组件系统

5.vue 几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue 常用的修饰符？

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 事件发生在该元素本身而不是子元素的时候会触发；

7.v-on 可以绑定多个方法吗？

答：可以

8.vue 中 key 值的作用？

v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚DOM。

9.什么是 vue的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：

①使得数据处理结构清晰；

②依赖于数据，数据更新，处理结果自动更新；

③计算属性内部 this 指向 vm 实例；

⑥methods，不管依赖的数据变不变 ，都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算。

10.vue 等单页面应用及其优缺点

优点：Vue 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到 IE9；不利于 SEO 的优化；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。