面试官常问的 web前端 问题 31-40 31.使用 Vue 的好处32.MVVM 定义33.Vue 的生命周期（重点）34.Vue 的响应式原理35.第一次页面加载会触发哪几个钩子？36.为什么vue 中 data 必须是一个函数？37.vue 中做数据渲染的时候如何保证将数据原样输出？38.active-class 是哪个组件的属性？39.vue-router 有哪几种导航钩子？40. $route 和 $router 的区别
31.使用 Vue 的好处
vue 两大特点：响应式编程、组件化 ；
vue 的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟 DOM、运行速度快
MVVM 是 Model-View-ViewModel 的简写，模型-视图-视图模型。
【模型】指的是后端传递的数据（数据：json）。
【视图】指的是所看到的页面。
【视图模型】mvvm 模式的核心，它是连接 view 和 model 的桥梁。
有两个方向：
将【模型】转化成【视图】：即将后端传递的数据转化成所看到的页面（将后端Ajax数据 渲染 到前端视图）。实现的方式是：数据绑定。
将【视图】转化成【模型】：即将所看到的页面转化成后端的数据。 实现的方式是：DOM 事件监听。
这两个方向都实现的，我们称之为数据的双向绑定。
总结：在 MVVM 的框架下视图和模型是不能直接通信的。
它们通过 ViewModel 来通信，ViewModel 通常要实现一个 observer 观察者，当数据发生变化，ViewModel 能够监听到数据 的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这 实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信
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（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端 渲染期间不被调用。
当一个 Vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖， 之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
触发这几个 beforeCreate、created、beforeMount、mounted ，并在 mounted 的时候 DOM 渲染完成
36.为什么vue 中 data 必须是一个函数？对象为引用类型，当重用组件时，由于数据对象都指向同一个 data 对象，当在一个组件中修改 data 时，其他重用的组件中的 data 会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object 的实例），引用地址不同，则不会出现这个问题。
37.vue 中做数据渲染的时候如何保证将数据原样输出？v-text：将数据输出到元素内部，如果输出的数据有 HTML代码，会作为普通文本输出；
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染
{{}}：插值表达式，可以直接获取 Vue 实例中定义的数据或函数，使用插值表达式的时候，值可能闪烁；而使用 v-html、v-text 不 会闪烁，有值就显示，没值就隐藏
vue-router 模块的 router-link 组件。
39.vue-router 有哪几种导航钩子？三种;
全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截;
组件内的钩子；
单独路由独享组件；
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数；
$router 是“路由实例” 对象包括了路由的跳转方法，钩子函数等