【每日前端面经】2024-03-01

题目来源: 牛客

MVVM怎么实现

MVVM分别指View、Model、ViewModel，View通过View-Model的DOM监听器将事件绑定到Model上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接的作用

• 响应式: vue如何监听data的属性变化
• 模板解析: vue的模板是如何被解析
• 渲染: vue的模板是如何被渲染成HTML

发布订阅模式

发布订阅模式是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，由调度中心统一调度订阅者注册到调度中心的回调函数

• 创建一个对象
• 在该对象上创建一个缓存列表
• on 方法用来把函数fn都加到缓存列表中
• emit 方法用来取到arguments里第一个当作event，根据event值去执行对应缓存列表中的函数
• off 方法可以根据event值取消订阅
• once 方法只监听一次，调用完毕后删除缓存函数

观察者模式和发布订阅模式的区别

• 观察者模式是软件设计模式中的一种，但发布订阅模式是软件架构模式的一种消息范式
• 观察者模式需要观察者和被观察者，发布订阅模式需要发布者、订阅者和发布订阅中心
• 观察者模式一般是一对多的关系，通过被观察者主动建立，需要至少三个方法：添加观察者|移除观察者|通知观察者；发布订阅者是基于一个中心来建立整个体系，其中发布者和订阅者不直接进行通信，而是发布者把要发布的消息交给中心管理，订阅者也是根据自己的情况按需订阅消息

Vue单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样能防止子组件意外改变父组件的状态，从而导致应用的数据流向难以理解

原生JS监听鼠标

• click: 单击鼠标左键
• dblclick: 单机鼠标右键
• mousedown: 单机任意一个鼠标按钮
• mouseout: 鼠标指针位于某个元素啊上且将要移除元素的边界
• mouseover: 鼠标指针移出某个元素到另一个元素上
• mouseup: 松开任意一个鼠标按钮时发生
• mousemove: 鼠标在某个元素上持续发生

cookie|localstorage|sessionstorage

三者都是开发中用到的临时存储客户端会话信息或者数据的方法

• 有效期不同: cookie有效期可以设置，默认时浏览器关闭后失效；sessionStorage默认是当前页面关闭后失效；localStorage默认是永久有效，需要手动删除
• 存储大小不同: cookie在4kb左右；localStorage和sessionStorage的容量在5Mb
• 服务端通信: cookie会参与到服务端通信中，一般会携带在http请求的头部中；localStorage和sessionStorage不参与服务端通信
• 读写操作: cookie操作起来较为繁琐，部分数据不可读取操作；sessionStorage和localStorage操作起来较为简便
• 支持程度: cookie出现时间更早，浏览器支持程度更高

盒子模型

盒子分为margin、border、padding、content，其中width=content

怪异盒模型

盒子分为margin、border、padding、content，其中width=content + padding * 2 + border * 2

ref|reactive|toRef|toRefs

• ref: 用于为数据添加响应式状态，获取数据值需要.value
• reactive: 用于为对象添加响应式状态，不需要.value
• toRef: 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象的响应式连接，返回一个ref数据
• toRefs: 用于将响应式对象转化成结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref，可以在对象解构时赋予响应式

JS数据类型

• Number
• Boolean
• Null
• Undefined
• Object
• String
• Symbol
• BigInt

v-model

v-model负责监听用户的输入事件以更新数据，背后由两个操作：v-bind绑定value属性的值；v-on绑定input事件监听函数

MVVM框架理解及其原理实现
JavaScript 发布-订阅模式
理解【观察者模式】和【发布订阅】的区别
理解vue的单向数据流
JS鼠标事件（非常详细）
cookie、localStorage和sessionStorage三者的区别
CSS详解——盒子模型
全网最详细的v-model讲解
ref、reactive、toRef、toRefs的区别

新手发文，礼貌求关❤️