手撕八股-知识点

React和Vue的异同

vue和react作为优秀的前端开发框架,遵循的都是数据驱动视图的思想；
(1）都使用了虚拟DOM,但由于diff算法的不同，更新dom的策略有所差异；vue使用的边对比，边更新；react是记录比较需要更新的dom,得到patch树，统一进行批量更新；
(2) vue大多使用的是双向数据绑定，即双向数据流； react的则是单向数据流，依靠回调函数来通信；

SPA 和 MPA 的区别

SPA为通过监听url的变化（hash模式）去替换局部的页面，减少页面资源的加载（首次页面加载除外）,页面切换速率较快，用户体验较好；页面或组件之间传递数据较易，但是不利于SEO;

vue 中template解析至页面html展示过程原理解析

1. 将template  通过正则匹配 解析成ast; 遍历ast树 标记静态节点; 转换成render 和statticRender函数;
2. 根据相关的render 函数 生成vnode;
3. vnode节点转换为真实节点 并插入视图

如何优化首屏加载

// 由于首次加载资源速度慢 会引起首屏可视内容渲染速度慢 甚至会有短暂时间白屏；
// 影响因素：1） 网络波动; 2) 文件资源体积大; 3) 渲染内容会阻塞js的加载; 

// 优化方式
 1. 减小入口文件的体积（路由懒加载）;
 2. 静态资源本地缓存 （利用缓存,减少请求已有的静态资源）;
 3. 打包优化, 抽离公共代码为复用依赖;

vue2中的data 为啥是个函数

根实例的data 可以是函数或者是对象，但是组件实例的data是函数，为了防止不同组件实例之间的data 相互污染;

vue2的组件通信

1.  父子组件  使用props; 
2.  inject / provide
3.  attrs/listeners
4.  event bus
5.  vuex 

数据的双向绑定

222

// v-model语法糖是怎么实现的
//  v-bind 绑定一个值  然后通过v-on 绑定一个事件  text-area/input 使用的是input 事件

slot的使用 及 通信

// slot的使用分为默认插槽 具名插槽 和作用域插槽
 
 使用v-slot(简写为#);

虚拟dom的理解

// 虚拟dom 是对真实dom 的抽象定义; 包含tag, attrs,children

vue2 和vue3 的差异与改进

// vue2的数据响应式来自于使用了Object.defineProperty()的方法. 在模板渲染的时候会收集所有的依赖变量，依次遍历收集，劫持了这些变量的属性setter 和getter, 当数据发生变化后，会通知当前组件的watcher,最终通知更新视图；但是由于Object.defineProperty()的缺陷，无法使用监听到对象属性的增删，以及部分数组方法的导致的属性值变化；所以vue3 在新的基础上摒弃了原来的，使用了ES6的新特性Proxy;将整个属性对象进行代理并且返回一个新的对象;并在此基础上优化了diff算法,增加了静态节点的标记; vue3自带的tree-shaking使得打包的文件体积更小

vite和webpack的区别

vite和webpack 作为打包工具, 文件打包之后，启动更新vite是是直接请求浏览器，编译某模块更新，无需像webpack 更新后重新生成bundles,用于更新;