共计 1872 个字符，预计需要花费 5 分钟才能阅读完成。
【前端芝士树】Vue.js 面试题整理
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 来统一管理。
注意，MVVM 模型中，Model 和 View 是不会直接连接的，而 ViewModel 则会以双向连接的形式连接 Model 和 View。
0. Vue 的特性（优缺点）
轻量级的框架
双向数据绑定
指令
插件化
1. Vue 的生命周期
具体可以参照官网的这张图，左侧以红色框表示的都是阶段
beforeCreate
created
beforeMount
mounted
beforeUpdated
updated
beforeDestroy
destroyed
大致过程就是
数据初始化（1~2）完成数据观测、属性和方法的运算加载，event/wather 时间回调。
dom 挂载阶段（3~4）el 被新创建的 vm.$el 替换并挂载到实例上去，之后调用钩子函数。
数据更新阶段（5~6）数据更新，虚拟 dom 重渲染
组件卸载阶段（7~8）销毁实例及子实例
2. Vue 实现数据双向绑定的原理
vue 实现数据双向绑定主要是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty（）来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
vue 的数据双向绑定 将 MVVM 作为数据绑定的入口，整合 Observer，Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令，最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —> 视图更新；视图交互变化（input）—> 数据 model 变更双向绑定效果。
3. Vue 的路由实现
路由的实现有两种：hash 和 history interface 来实现前端路由，hash 在浏览器中符号“#”，# 以及 #后面的字符称之为 hash，用 window.location.hash 读取；特点：
（1）hash 虽然在 URL 中，但不被包括在 HTTP 请求中
（2）用来指导浏览器动作，对服务端安全无用，hash 不会重加载页面
history 采用 h5 的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更，不过 history 有个问题是：如果用户直接在地址栏中输入并回车，浏览器重启或重新加载时，history 模式会将 url 修改的和正常请求后端一样，此情况下，重新向后端发送请求，后端如果没有配置对应路由处理，则返回 404，解决方法是后端配置一下。
4. Vue 路由传参
<router-link :to=”{path:’/index’,params：{id:num}}”>
<router-link :to=”{path:’/index’ , query:{id:num}}”>
然后通过 $route.params 来读取数据，但路由传递参数值是对象的话就不行了会报错，传递前用 base64 转译一下就可以了。
未完待续 – – – – – –
参考链接 MVVM – 廖雪峰的官方网站 MVC，MVP 和 MVVM 的图示 – 阮一峰的网络日志 vue.js 学习笔记 (一)：什么是 mvvm 框架，vue.js 的核心思想 – _林冲 – 博客园
