Java面试——VUE2&VUE3概览

一、VUE2.0

1、对于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 来统一管理。

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

3、数据双向绑定的原理

    vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

    vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

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

4.1、hash模式

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

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

4.2、history模式

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

5、vue路由的钩子函数

• beforeEach主要有3个参数to，from，next：
• to：route即将进入的目标路由对象；
• from：route当前导航正要离开的路由；
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

二、VUE3.0

优势：

• 更小
• 更快
• 加强 TypeScript 支持
• 加强 API 设计一致性
• 提高自身可维护性
• 开放更多底层功能

劣势：

• 稍微拔高了一点萌新学习门槛

1、设计目标

Vue3之前面临的问题：

• 随着功能的增长，复杂组件的代码变得越来越难以维护
• 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制
• 类型推断不够友好
• bundle的时间太久了

Vue3 经过长达两三年时间的筹备，做了哪些事情？

• 更小
• 更快
• TypeScript支持
• API设计一致性
• 提高自身可维护性
• 开放更多底层功能

注： 一句话概述，就是更小更快更友好了。

1.1、更小

    Vue3移除一些不常用的 API，引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了。

1.2、更快

主要体现在编译方面：

• diff算法优化
• 静态提升
• 事件监听缓存
• SSR优化

1.3、更友好

    vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力。

2、优化方案

2.1、vue3从很多层面都做了优化，可以分成三个方面：

• 源码
• 性能
• 语法 API

2.2、源码可以从两个层面展开：

• 源码管理
• TypeScript

TypeScript:
Vue3是基于typeScript编写的，提供了更好的类型检查，能支持复杂的类型推导。

3、性能

• 体积优化
• 编译优化
• 数据劫持优化

    在vue2中，数据劫持是通过Object.defineProperty，这个 API 有一些缺陷，并不能检测对象属性的添加和删除。

    尽管Vue为了解决这个问题提供了 set和delete实例方法，但是对于用户来说，还是增加了一定的心智负担，同时在面对嵌套层级比较深的情况下，就存在性能问题。

    相比之下，vue3是通过proxy监听整个对象，那么对于删除还是监听当然也能监听到，同时Proxy 并不能监听到内部深层次的对象变化，而 Vue3 的处理方式是在getter 中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归。

4、语法 API

就是composition API，其两大显著的优化：

• 优化逻辑组织
• 优化逻辑复用

4.1、逻辑组织

一张图，我们可以很直观地感受到 Composition API在逻辑组织方面的优势

相同功能的代码编写在一块，而不像options API那样，各个功能的代码混成一块。

4.2、逻辑复用

    在vue2中，我们是通过mixin实现功能混合，如果多个mixin混合，会存在两个非常明显的问题：命名冲突和数据来源不清晰。

    而通过composition这种形式，可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可。