vue 概述

Vvue 的优点：

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有即时Kb
• 简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习
• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页应用方面有着独特的优势
• 视图：数据，结构分离，使数据的更改更为简单，不需要进行逻辑代码的更改，只需要操作数据就能完成相关操作
• 虚拟DOM：dom 是非常耗费性能的，不再使用原生 的dom 操作节点，极大解放dom 操作，但具体操作的还是 dom 不过是换了另外一种方式
• 运行速度更快：相对于 react 而言，同样是操作虚拟dom，就性能而言，vue 存在很大的优势

说说你对 SPA 单页面的理解，他的优缺点分别是什么

• SPA 仅在 Web 页面初始化时加载相应的 HTML，JS和CSS
• 一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或者跳转
• 而页面的变化是利用路由机制实现 HTML内容的变换，避免页面的重新加载

优点：

• 用户体验度好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
• 减少了不必要的跳转和重复渲染，这样相对减轻了服务器的压力
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点：

• 初次加载耗时多
• 不能使用浏览器的前进后退功能，由于单页应用是在一个页面中显示所有的内容，所以，无法前进后退
• 不利于搜索引擎检索：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上有着其天然的弱势

SPA 首屏加载速度慢是怎么解决

首屏时间：指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个页面不一定要全部渲染完成，但需要展示当前视窗需要的内容。

首屏加载慢点原因：

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候，渲染内容堵塞了

常见的几种SPA 首屏优化方式

• 减少入口文件体积
• 静态资源本地缓存
• UI框架按需加载
• 图片资源的压缩
• 组件重复打包
• 开启Gzip打包
• 使用SSR

有一个博客写的关于SPA讲解的挺详细的，感兴趣的可以看一下：详解SPA
Vue 初始化过程中（new Vue(options)) 都做了什么

•   处理组建配置项： 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上；初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率
• 初始化组件实例的关系属性，比如 parent,children,root,refs等
• 处理自定义事件
• 调用before Create钩子函数
• 初始化组件的 inject 配置项，得到 ref[key]=val形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 示例上
• 数据响应式，处理 props，methods，data，computed，watch等选项
• 解析组件配置项上的 provide 对象，将其挂载到 vm_provided 属性上
• 调用 created 钩子函数
• 如果发现配置上 有 el 选项，则自动调用 $mount 方法，也就是说有了 el. 选项，就不需要再手动调用 $mount方法，反正，没提供 el 选项则必须调用 $mount
• 接下来进入挂载阶段
• ​

 对 MVVM 的理解

MVVM 由 Model，View,ViewModel 三部分构成：Model层代表数据模型，也可以Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转换成UI展现出来；View Model 是一个同步 View 和 Model的对象

在MVVM 架构下，View 和Model 之间并没有直接的联系，而是通过ViewModel 进行交互，Model 和 ViewModel之间的交互是双向的，因此 View 数据的变化会同步到 Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过数据双向绑定把 View和Model层连接起来，而View 和model之间的同步工作完全是自动的，无需认为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM来统一管理

Vue 数据双向绑定原理

实现MVVM数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。

就必须实现一下几点：

• 实现一个数据监听器 Observer ,能够对数据对象的所有属性进行监听，如有变动可以拿到最新值并通知订阅者
• 实现一个指令解析器 Compile ，对每个元素节点的指令进行扫描和解析，根据指令模版替换数据，以及绑定相应的更新函数
• 实现一个watcher，作为连接 Observer和Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令的相应回调函数，从而更新视图
• ​

Vue 的响应式原理

什么事响应式，也就是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值

Object.defineProperty 为对象中的每一个属性，设置 get. 和set. 方法，每个声明的属性，都会有一个专属的依赖收集器 subs ，当页面使用到某个属性时，会触发 Object.defineProperty-get 函数，页面的watcher 就会被放到属性的依赖收集器 subs中，在数据变化时，通知更新：当数据改变的时候，会触发Object.defineProperty-set 函数，数据会遍历自己的依赖收集器 subs,逐个通知watcher，视图开始更新；

Vue 3.x 响应式数据原理：

Vue3.x 改用Proxy 替代object.defineProperty .因为proxy可以直接监听对象和数组的变化，并且由多达13种拦截方法，并且作为新标准将受到浏览器厂商重点持续的性能优化；proxy只会代理对象的第一层，vue3 是怎么处理的呢

判断当前Reflect.get 的返回值是否是 Object，如果是 则再通过 reactive方法做代理，这样就实现了深度观测。监测数组的时候可能触发多次 get/set，那么如何防止触发多次？我们可以判断key 是否为当前代理对象 target自身属性，也可以判断旧值与新值是否相等࿰