vue源码系列

概述 今天我们研究副作用函数，有人提出疑问：副作用函数是个啥？ 举例：小明有十个暗恋对象，十个人都是未婚，那她们每个人都有可能和小明结婚。有一天，其中一个名叫刘大漂亮嫁给隔壁村的王二狗。刘大漂亮和王二

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」 为什么要分析diff算法？ 了解清楚diff算法，有助于写出对页面dom更新的性能更高的代码。 锻炼自己的解决问题的思

在Vue和React中都有diff的存在，区别是Vue把diff控制在组件内，而React是通过Fiber优化。下面我们把diff最简化的讲出来。 diff的作用是对比新旧VNode，然后执行patc

如果帮助到大佬，请给小弟一个赞哈！ provides的来源 每个组件在形成实例时：如果有父组件，则使用父组件的provides，没有则为{} provides源码 void 0同等于undefined

概述 触发依赖之后都会执行patch函数，它做了什么呢？ patch的作用是通过对比新旧虚拟dom，来更新dom。其中涉及到的知识点非常多，我们必须一步一步的分析。 h函数的使用 通过h函数的使用分析

processComponent处理组件 mountComponent挂载组件 通过createComponentInstance生成实例 有父组件的赋值给provides isMounted设置为f

processElement处理标签 mountElement挂载标签 创建对应type的dom children是string：el.textContent = text children是arra

使用场景 我们在修改一个数据后，立刻获取绑定该数据的dom，会发现dom上的数据并没有变。 而放在this.$nextTick中就可以打印出变化之后的数据。 看源码前戏必备 要理解dom修改和页面渲染

看文章前，请先看reactive和ref的文章。 如何使用 computed源码 computed执行new ComputedRefImpl，我们看ComputedRefImpl _dirty用来标记

依赖收集和触发ref和reactive分开讨论 公共部分 从patch开始 patch触发了processComponent processComponent触发mountComponent moun

导出了什么？ 公共部分 1、创建Ref 2、创建Ref的类 3、type和接口，不细讲了 ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 propert

Reactive有那些可用的函数： type和枚举 公共的部分（后续很多地方要回到这） 1、生成get、set 2、createGetter、createSetter createGetter接受两个

明确问题： Vue2.0中劫持使用的Object.defineProperty，只能劫持到对象每个属性的获取get和修改set，而数组有很多方法可以修改自身，那么Vue是怎样劫持到它的改变？ 对照代码

我们简单分析三种响应式的方法： Vue2.0中的definedProperty 利用definedProperty并不是真正的代理，只是对属性做了劫持，比如对象删除或者数组的一些操作都是不能劫持到的。