2025年前端之VUE

科技前沿 • 2025-04-11 22:04 • 阅读 55

大家好，我是讯享网，很高兴认识大家。

MVC模式

1 控制器Controller 模型 Model 视图 View

2 路由解析(根据URL寻找控制器与行为) à 控制器调用行为，进行数据操作 –> 数据操作后进行视图与数据的页面渲染输入到客户端

MVVM模式

将 MVC 中的控制器变成View Model

VIEW代表UI组件 MODEL代表数据模型

VIEW和MODEL之间的桥梁视图发生改变通知VIEWMODEL层更新，数据发生改变通知VIEWMODEL层更新视图渲染。

VUE2.0数据响应式

Object.defineProperty 给data中所有属性设置setter和getter，收集依赖。数据变化时触发setter通知依赖，Watcher通知外界数据改变(视图更新或者触发回调)。外界读取数据时触发getter将watcher收集到依赖中。

缺点：E6之前无元编程，新增和删除属性无法设置响应式，需要重新遍及设置响应式。数组的一些方法也会无法通知watcher数据发生变化。

VUE2数组如何设置

使用函数劫持，重写函数方法。调用数组API的时候就会通知依赖更新。缺点：修改第一个元素时,无法检测。清楚数组的操作也无法检测。

VUE3.0数据响应式

使用Proxy 代理直接监听对象和数组的变化，判断Refect.get返回的是否为对象然后通过relative方法做代理，实现深层观测。

观测数组时触发多次如何避免--à用key判断是否代理对象target自身属性。或者判断新旧值是否相等，才执行触发器。

VUE指令原理

模版编译时，将指令解析出来并添加到AST的directives属性里.

VUE常用修饰符

键盘.delete .ctrl .alt .shift .enter .meta

鼠标.left .right 将输入转换成数字v-model.number/.trim

.middle

nestTick原理

再下次DOM更新循环结束后执行延迟回调。

分为宏任务和微任务。

Promise

Mutation Observer

Setimmediate

以上皆不可以使用setTimeout。定义一个异步方法，多次调用nestTick会存入一个队列。

V-if