vue源码
文章平均质量分 88
vue源码相关
寻ing
我又回来了~
展开
-
vue3响应式核心 reactivity 源码逻辑分析
当创建reactive后,会对传入对象进行proxy代理,在被订阅者使用(get)时,触发track函数 收集依赖,记录下“订阅者在这里用到当前reactive啦!”,在对象被修改(set)时,触发trigger函数 触发依赖,“要去更新所有用到当前reactive的订阅者!”......原创 2023-03-13 14:49:39 · 278 阅读 · 1 评论 -
vue 组件通信 事件处理
本文主要是通过源码了解,vue是怎样把事件传递给子组件并能够给正常调用的。首先看一个超级简单的demodemo中有一个组件,父级向里边传入了一个函数,个组件中通过调用了它,这是一个最简单的事件通信方法跳过不相干的步骤,我们从创建组件的虚拟节点处的源码开始说起想了解他的实现原理,可以拆开的整体流程,从方法下手,来看看子组件中函数调用时都做了什么(函数就是一个通过调用并抛出错误的通用函数,文章最底下会简略说明该函数)可以看到,方法实际就是找到并调用该素组中的所有方法,那我们现在的目标就是找到中的数据怎么存原创 2022-07-08 14:53:21 · 937 阅读 · 0 评论 -
vue 组件通信 props
了解props源码主要是解决两个疑问答:父组件怎么将值传递给子组件的?父组件的值更新后,子组件如何更新?我们写的节点模板会被解析并生成`render`函数,函数执行时会从父组件中获取到传参,子组件获取到传参后,会对其外层进行响应式绑定,并代理到vm上详细的说,可以从两个部分来解释,分别是父组件怎么传给子组件子组件怎么处理传过来的参数1. 父组件怎么传给子组件我们写的节点模板会被解析并生成render函数、然后通过render函数最终生成一个vnode虚拟节点,render函数大概.........原创 2022-06-10 16:54:42 · 494 阅读 · 1 评论 -
vue diff算法
vue diff算法 在vue中的实现原理,patch函数、patchVnode、updateChildren、sameVnode函数的介绍原创 2022-04-28 16:00:32 · 3621 阅读 · 0 评论 -
Vue组件的渲染流程
Vue的组件渲染、extend方法、Ctor、组件的注册流程详解原创 2022-04-24 17:30:13 · 1943 阅读 · 0 评论 -
watch与计算属性 (源码浅析)
watch与计算属性源码浅析原创 2022-03-17 13:34:19 · 1503 阅读 · 1 评论 -
Vue的响应式原理-数组处理
数组和对象处理的区别是在`class Observer{}`中开始区分的,对象的话是调用了`walk`方法进行处理,数组的话是首先执行`protoAugment`/`copyAugment`方法来“劫持”数组七种方法,然后调用`observeArray(value)`将数组中的属性循环执行`observe(item)`原创 2022-03-08 11:15:39 · 700 阅读 · 0 评论 -
Vue的响应式原理-两个创建Dep的位置
在`Vue`响应式的`class Observer`部分,我们发现会有两个部分都创建了`Dep`实例。分别为1:defineReactive创建的dep 2:Observer创建的dep,那么这两个dep到底都是干什么用的呢?原创 2022-03-03 13:32:56 · 584 阅读 · 0 评论 -
Vue的响应式原理
Vue的响应式实现主要有三块重点内容,分别为Observer、Dep、watcher。我们常说的`Object.defineProperty`就是通过`observe函数`、`Observer类`、`defineReactive函数`的递归执行实现,`defineProperty`写在`defineReactive`函数中;而数据与视图的相互绑定(数据改变页面也跟着改变),是通过`Dep类`(发布者)和`watcher类`(观察者)实现的原创 2022-03-01 10:27:14 · 928 阅读 · 0 评论