![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue源码解析
文章平均质量分 95
三月的一天
计算机专业硕士毕业,多年的数学建模、复杂网络、软件开发、前后端技术开发的实践经验。作为一名博客作者,我致力于将我所学到的知识和经验分享给更多的人。我相信,知识的力量在于传播,而分享则是知识传播的最佳途径。我的博客内容涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识。旨在为读者提供有价值的信息和实用的技巧。如果您对我的博客内容感兴趣,或者有任何问题想要交流,您可以通过评论或者私信与我联系!
展开
-
vue源码解析——diff算法/双端比对/patchFlag/最长递增子序列
虚拟dom——virtual dom,提供一种简单js对象去代替复杂的 dom 对象,从而优化 dom 操作。virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。virtual dom 很多时候都不是最优的操作,但它具有普适性,在效率、可维护性之间达到平衡。diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch,也叫打补丁。只有当新旧子节点的类型都是多个子节点时,核心 Diff 算法才派得上用场。diff的目的是时间换空间:尽可能通原创 2024-04-14 21:39:10 · 1502 阅读 · 0 评论 -
vue源码解析——v-if和v-for哪个优先级高,如何避免两者同时使用
官方不推荐v-if和v-for在同一个元素上使用。其次,如果两者同时使用,v-if和v-for的优先级怎么确定?在vue2和vue3中这两者的优先级顺序不一样。vue2是v-for优先,条件不存在时也会渲染多个注释节点。在vue3中进行了改进,v-if优先级高。在vue3中,v-if在编译阶段进行了静态节点提升,所以在v-for遍历每个节点,v-if对单个节点判断,这种情况会报错。不管是vue2还是vue3,都推荐,将v-for遍历的数组用计算属性改写,根据v-if依赖的条件返回过滤后的数组。原创 2024-04-10 12:33:45 · 1342 阅读 · 0 评论 -
vue2源码解析——vue中如何进行依赖收集、响应式原理
vue每个组件实例vm都有一个渲染watcher。每个响应式对象的属性key都有一个dep对象。所谓的依赖收集,就是让每个属性记住它依赖的watcher。但是属性可能用在多个模板里,所以,一个属性可能对应多个watcher。因此,在vue2中,属性要通过dep对象管理属性依赖的watcher。在初始化时编译器生成render函数,此时触发属性的依赖收集dep.depend。组件挂载完成后,操作页面,当数据变化后,对应的响应时对象会调用dep.notify方法通知自己对应的watcher更新。原创 2024-04-03 22:22:22 · 1441 阅读 · 0 评论 -
vue2源码解析——new Vue()这个过程究竟做了什么?
new Vue() 是 Vue.js 框架中用于创建根 Vue 实例的语法。当我们使用 Vue.js 构建一个单页面应用时,通常会先创建一个根 Vue 实例,然后在该实例中定义应用的数据、方法、计算属性等,以及挂载根组件。具体来说,new Vue() 的作用是:创建一个 Vue 实例,该实例代表整个 Vue 应用的根实例。通过传入的选项对象来配置该 Vue 实例,包括数据、计算属性、方法、生命周期钩子函数等。将该 Vue 实例挂载到一个真实的 DOM 元素上,使得应用原创 2024-04-02 21:13:11 · 1150 阅读 · 0 评论 -
vue源码解析——vue如何将template转换为render函数
Vue 将模板(template)转换为渲染函数(render function)是 Vue 编译器的核心功能,它是 Vue 实现响应式和虚拟 DOM 的关键步骤。在 Vue 中,模板(template)是开发者编写的类似 HTML 的代码,用于描述页面的结构和交互逻辑。渲染函数(render function)是 Vue 编译器将模板转换为JavaScript 函数,用于生成虚拟 DOM,并最终渲染到页面上。vue模板渲染是个很复杂的过程,牵扯vue的响应式和虚拟dom。原创 2024-04-02 14:13:43 · 1693 阅读 · 0 评论 -
vue3源码解析——watch和watchEffect区别
在这部分源码分析中,用了很长的篇幅取介绍doWatch的实现,因为watch和watchEffect都调用了doWatch,只是第二个参数不同,watchEffect传入的是null,watch传入的是cb。doWatch干了什么事情呢?首先由要收集数据依赖,收集的是哪写属性呢?source传入的可能是ref\reactive属性、数组或者函数,这个时候需要对source进行计算,看最终依赖的是什么东西?通过定义一个getter函数,根据source类型不同,得到监听数据最后的执行结果。怎么收集数据依赖呢。原创 2024-03-31 14:02:06 · 2439 阅读 · 0 评论 -
vue3源码解析——ref和reactive定义响应式的区别
ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别:ref 定义单个响应式数据 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象,该对象包含一个 .value 属性,可用于获取和设置数据。底层采用Object.defineProperty()实现reactive 定义多个响应式数据 数据类型必须是对象返回一个响应式对象,必须使用响应式对象来获取属性和设置数据原创 2024-03-29 23:39:09 · 1328 阅读 · 0 评论 -
vue源码解析—— watch/computed的实现逻辑和区别
watch和computed是 Vue 中的两个重要的响应式属性,它们在实现机制和使用上存在一些区别。watchdeepimmediatecomputedgetsetVue 2 中,使用来实现数据响应式,并且在数据变化时通过getter函数来依赖收集和发布订阅。在 Vue 3 中,使用Proxy来实现数据响应式,并且在数据变化时通过get函数来依赖收集和发布订阅。这也导致了在源码实现上vue2和vue3的不同。原创 2024-03-29 15:43:35 · 1279 阅读 · 0 评论 -
vue源码解析——v-if和v-show各自是如何实现的元素的隐藏
在Vue.js中,v-if和v-show是常用的指令,用于控制元素的显示和隐藏。虽然它们都可以隐藏元素,但实现的方式略有不同。在这篇博客中,我们将深入探讨v-if和v-show各自是如何实现元素的隐藏的。原创 2024-03-29 10:51:24 · 1048 阅读 · 0 评论 -
vue2源码解析——Vue.set/$set方法如何给响应式对象添加属性
在Vue 2中需要向响应式对象添加新属性时,可以使用Vue.set或$set方法来实现。这两个方法的作用是向响应式对象添加属性并确保这个新属性也是响应式的。vue.set方法首先会区分是对数组还是对象进行新增属性。,利用vue2改写后的splice方法进行元素插入(此时$set是向数组里新增一个元素)。对象本身没有这个key。考虑对象是否为响应式对象。如果是响应式对象,调用defineReactive给当前对象的key增加响应式依赖。对象不是响应式的,直接给对象加属性,不用考虑响应式问题。原创 2024-03-28 19:04:41 · 1158 阅读 · 0 评论