关于前端Vue框架的知识点

最近有时间，整理一下 Vue 的知识点，很多都是面试常见的

1、Vue 的生命周期

如果你能理解了这张图，也就对 Vue 的生命周期有了一个大致的了解。

vue 生命周期总共分为 8 个阶段 创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。

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

第一次页面加载会触发哪几个钩子？答：会触发 下面这几个 beforeCreate, created, beforeMount, mounted。DOM 渲染在 哪个周期中就已经完成？答：DOM 渲染在 mounted 中就已经完成了。

2、对 MVVM 开发模式的理解？

MVVM 分为 Model、View、ViewModel 三者。

• Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
• View 代表 UI 视图，负责数据的展示；
• ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

3、VUE 数据双向绑定原理

答：vue.js 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的
setter，getter，在数据变动时发布消息 给订阅者，触发相应的监听回调。
具体步骤:

• 第一步: 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter

这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

• 第二步:compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定

更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

• 第三步:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

  1、在自身实例化时往属性订阅器 (dep) 里面添加自己
  2、自身必须有一个 update() 方法
  3、待属性变动 dep.notice() 通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。

• 第四步:MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新; 视图交互变化(input)-> 数据 model 变更的双向绑定效果。

详细请看：Vue 双向数据绑定原理详细分析

4、v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而 v -if 会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示 / 隐藏时，使用 v -show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用 v -if 更加合理。

5、父子组件之间的传值和通信？

父组件向子组件传值：
1）子组件在 props 中创建一个属性，用来接收父组件传过来的值；
2）在父组件中注册子组件；
3）在子组件标签中添加子组件 props 中创建的属性；
4）把需要传给子组件的值赋给该属性

子组件向父组件传值：
1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
2）将需要传的值作为 $emit 的第二个参数，该值将作为实参传给响应事件的方法；
3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

6、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 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

7、vue 路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach 等，一般用于页面 title 的修改。一些需要登录才能调整页面的重定向功能。
beforeEach 主要有 3 个参数 to，from，next：
to：route 即将进入的目标路由对象，
from：route 当前导航正要离开的路由
next：function 一定要调用该方法 resolve 这个钩子。执行效果依赖 next 方法的调用参数。可以控制网页的跳转。

8、vue 等单页面应用及其优缺点

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到 IE9；不利于 SEO 的优化（如果要支持 SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

9、vue 中 key 值的作用？

key 的作用主要是为了高效的更新虚拟 DOM。