12 2022 档案
摘要:这一节,依然是深入剖析Vue源码系列,上几节内容介绍了Virtual DOM是Vue在渲染机制上做的优化,而渲染的核心在于数据变化时,如何高效的更新节点,这就是diff算法。由于源码中关于diff算法部分流程复杂,直接剖析每个流程不易于理解,所以这一节我们换一个思路,参考源码来手动实现一个简易版的d
阅读全文
摘要:双向数据绑定这个概念或者大家并不陌生,视图影响数据,数据同样影响视图,两者间有双向依赖的关系。在响应式系统构建的上,中,下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联?这就是本节讨论的重点:指令v-model。 由于v-model和前面介绍的插槽,事件一致,都属于vue
阅读全文
摘要:这个系列讲到这里,Vue基本核心的东西已经分析完,但是Vue之所以强大,离不开它提供给用户的一些实用功能,开发者可以更偏向于业务逻辑而非基本功能的实现。例如,在日常开发中,我们将@click=***用得飞起,但是我们是否思考,Vue如何在后面为我们的模板做事件相关的处理,并且我们经常利用组件的自定义
阅读全文
摘要:前面我们讲到了_init函数的执行流程,简单回顾下: 初始化生命周期-initLifecycle 初始化事件-initEvents 初始化渲染函数-initRender 调用钩子函数-beforeCreate 初始化依赖注入-initInjections 初始化状态信息-initState 初始化依
阅读全文
摘要:一、Vue.nextTick 内部逻辑 在执行 initGlobalAPI(Vue) 初始化 Vue 全局 API 中,这么定义 Vue.nextTick。 function initGlobalAPI(Vue) { //... Vue.nextTick = nextTick; } 可以看出是直接把
阅读全文
摘要:4.1 Virtual DOM 4.1.1 浏览器的渲染流程 当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度,它首先会将html文件解析成一个DOM树,与此同时,浏览器将识别并加载CSS样式,并和DOM树一起合并为一个渲染树。有了渲染树后,渲染引擎将计算所
阅读全文