谈谈你对 vue 的理解

vue 是一套用于构建用户界面的渐进式框架，vue 的核心库只关注视图层。vue 的渐进式表现在刚开始不会一股脑的把一些概念全抛给你，而是让你根据自己的需求来不断扩充。

vue是一个轻量级框架，大小只有几十kb，具有易用性、灵活性和高效性的特点。

vue 提供数据响应式、基于配置的组件系统以及大量的指令等，这些让开发者只需关心核心业务；

vue比较灵活，可以根据需要引入 vue-router、vuex、vue-cli 等工具；

vue 操作的是虚拟 DOM，采用 diff 算法更新 DOM，比传统的 DOM 操作更加的高效；

vue也有缺点：

不支持IE8及以下版本。

Vue.js 模板解析到渲染的过程：

1. 模板解析：Vue会将模板解析为一个抽象语法树（AST），这个过程会解析模板中的指令、表达式等，并将它们转化为一个个的节点，每个节点包含了该节点的标签名、属性列表、指令、子节点等信息。解析过程可以通过 Vue.js 的编译器完成，也可以通过手动编写 render 函数来跳过这一步骤。

2. 模板编译：主要是将抽象语法树（AST）转换为渲染函数。根据数据生成虚拟 DOM，并将虚拟 DOM 渲染到真实 DOM 上。渲染函数可以手动编写，也可以由 Vue.js 的编译器自动生成。

3. 渲染和更新：将渲染函数执行的结果渲染到页面上。当组件的状态发生变化时，Vue会重新执行渲染函数，生成新的虚拟 DOM 树，并通过比较新旧虚拟 DOM 树的差异，最终将差异渲染到真实 DOM 上。

Vue 的双向数据绑定：

是一种数据流动的方式，它可以使数据的变化自动同步到视图，同时视图中的变化也可以自动地更新数据。

原理：

通过数据劫持结合发布者-订阅者模式来实现的。核心是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。

也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

具体实现步骤：

 vue初始化时，会对data数据进行劫持监听，也就是监听器 Observe，用来监听所有属性。
如果有属性发生变化就告诉订阅者Watcher看是否需要更新。

因为订阅者Watcher有多个，所以需要一个消息订阅器 Dep 来专门收集这些订阅者，在监听器Observe和订阅者Watcher之间进行统一管理。

还需要有一个指令解析器 Compile ，对每个节点元素进行扫描解析，将相关的指令（如 v-model，v-on …）对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应函数，当订阅者Watcher接收到相应属性的变化通知，就会执行对应的更新函数，从而去更新视图。

vue初始化时，会对data数据进行劫持监听，也就是监听器 Observe，用来监听所有属性。
如果有属性发生变化就告诉订阅者Watcher看是否需要更新。

1. 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者；
2. 实现一个订阅者Watcher，每个Watcher都绑定一个更新函数，Watcher可以收到属性的变化通知并执行相应的函数，从而更新视图；
3. 实现一个消息订阅器 Dep ,主要收集订阅者，当 Observe监听到发生变化，就通知Dep 再去通知Watcher去触发更新；
4. 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，若节点存在指令，则Compile初始化这类节点的模板数据（使其显示在视图上），以及初始化相应的订阅者。

v-model

在模板中使用双向绑定指令（例如 v-model）时，Vue 会在该指令所在的元素上注册一个事件监听器，该事件监听器会在用户输入时触发。

当用户输入时，事件监听器会调用该元素的 updateModelValue() 方法，该方法会将输入框的值赋给对应的 data 属性，并通知该属性的 Dep 对象。

Dep 对象会遍历其收集的所有观察者对象，并依次调用它们的 update() 方法，通知它们数据已经改变，需要更新视图。

观察者对象接收到数据改变的通知后，会触发其 update() 方法，该方法会重新渲染视图，使视图与最新的数据同步。

Vue 的响应式：

Vue 的响应式是通过 JavaScript 的 Object.defineProperty() 方法实现的。具体来说，Vue 将 data 对象中的每个属性都转化为 getter 和 setter，并且通过监听 getter 和 setter 的调用来实现响应式。当属性的值发生改变时，会自动地检测到变化并更新对应的视图。

当一个 Vue 实例被创建时，它会对 data 对象进行递归遍历，将每个属性都转化为 getter 和 setter，同时创建一个名为“依赖收集器”的对象。当访问属性时，getter 会被调用，并且会将“依赖收集器”中的当前 Watcher 对象加入到依赖列表中。当属性的值发生改变时，setter 会被调用，并且会遍历依赖列表，通知每个 Watcher 对象进行更新。

除了依赖收集器，Vue 还有一个名为“观察者”的对象。它负责实例化 Watcher 对象，并将 Watcher 对象加入到依赖收集器中。当一个组件被渲染时，Vue 会为这个组件创建一个“渲染 Watcher”，这个 Watcher 对象会监听组件中所使用的所有响应式数据。当组件中的响应式数据发生改变时，这个 Watcher 对象会触发组件的重新渲染。

双向数据绑定和响应式都是 Vue 中非常重要的概念，但是它们的区别在于前者是一种数据流动的方式，后者是实现数据绑定的机制。双向数据绑定依赖于响应式机制来实现，但是响应式机制本身并不一定需要双向数据绑定来使用。

Vue-router原理

更新视图而不重新请求页面，匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。

vue-router两种方式：Hash模式和History模式

new Vue 时传入的router是为了给Vue实例注入 router，route 这两个属性，

$route 存储当前的路由规则信息，路径、参数等信息

$router 是提供一些操作路径的方法 push、replace、go 还能通过currentRoute拿到当前路由规则信息

对比：

两种方式都是，当路径法发生变化，不会向服务器发送请求，使用js监视路径的变化，根据不同的地址渲染不同的内容。
Hash模式：url里面有#，#后面是路由地址，原理实现是基于锚点 和 onhashchange事件

History模式：url里面没有#，原理实现是基于HTML5中History API，history.pushState()，history.replaceState()，

History需要服务器支持，因为History没有 # 号，所以当用户刷新页面的时候，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，把除了静态资源外所有路由都重定向到根页面，在nginx配置文件中进行修改。

Vuex原理

应用的核心是 store，里面包括

state： vuex的基本数据,用来存储变量。 
getter：从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
mutation：提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 。 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
action：可以包含任意异步操作，提交的是 mutation,而不是直接变更状态;
modules：模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰,管理更为方便。

vuex的工作流程：
（1）通过dispatch去提交一个actions，
（2） actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations，
（3）actions通过commit去触发mutations，
（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染

为什么Vuex要通过mutations修改state，而不能直接修改？
因为state是实时更新的，mutations无法进行异步操作，如果直接修改state的话是能够异步操作的，当你异步对state进行操作时，还没执行完，这时候如果state已经在其他地方被修改了，这样就会导致程序出问题。所以state要同步操作，通过mutations的方式限制了不允许异步。
另外我们还用到了devtools这个工具，如果直接修改state的话，它是没有办法跟踪的，而vue提供这个工具是为了帮助我们在多个界面都来修改state，它希望做一个跟踪，这时当某一个界面修改这个state修改错误它就可以跟踪到是哪里修改错了，再做相关的调试。更加方便。