![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE源码学习记录
文章平均质量分 79
VUE3源码阅读为主
Chx.zhang
这个作者很懒,什么都没留下…
展开
-
VUE源码学习
索引规划CreateApp时发生了什么?“虚拟节点”的生成响应式编译APInexttickVUE3源码整体目录结构Vue3 源码的架构:├── .circleci // CI 配置目录├── .ls-lint.yml // 文件命名规范├── .prettierrc // 代码格式化 prettier 的配置文件├── CHANGELOG.md // 更新日志├── LICENSE├── README.md├── api-extractor.json // TypeS原创 2022-02-09 16:49:36 · 583 阅读 · 0 评论 -
【Vue3源码学习】响应式 api: watchEffect | watch 的实现原理
在 Vue2中watch 是 option 写法中一个很常用的选项,使用它可以非常方便的监听一个数据源的变化,而在 Vue3 中watch 独立成了一个 响应式api。源码地址:packages\runtime-core\src\apiWatch.tswatchEffect由于 watch中的许多行为都与 watchEffect 一致,所以 watchEffect 放在首位讲解,为了根据响应式状态自动应用和重新应用副作用,我们可以使用 watchEffect 方法。它立即执行传入的一个函数,同时响应式原创 2022-03-04 15:47:14 · 2109 阅读 · 0 评论 -
【Vue3源码学习】响应式api: computed
computed 是组件的计算属性,它的含义是依赖于其他状态而生成的状态,与响应式紧密相关。原创 2022-03-03 17:41:34 · 2451 阅读 · 0 评论 -
【Vue3源码学习】响应式源码解析:reactive、effect、ref
源码版本 Vue3.2.24废话不多说,直接开始!!!reactive响应式源码地址:packages/reactivity/reactive.ts先看一下在 Vue3 中定义的几个用来标记目标对象 target 的类型的ReactiveFlags,下面先是枚举的属性export const enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive', IS_READONLY = '__v_isReado原创 2022-03-01 10:39:37 · 2172 阅读 · 0 评论 -
【VUE2源码学习】响应式原理:从数据侦听、依赖收集到触发更新
在 new Vue 初始化的时候,在组件初始化时调用 initState() 方法 -> initProps() 方法 -> initData()方法对组件内的数据 props、data进行响应式处理,别用到了、defineReactive 、observe 方法。接下来就以此为切入口进行介绍。响应式数据观测observe() 为数据添加监测源码地址:src/core/observer/index.js - 110行如果是 vnode 的对象类型或者不是引用类型,就直接跳出否则就给原创 2022-02-22 15:50:14 · 342 阅读 · 0 评论 -
【VUE2源码学习】nextTick 实现原理
什么是nextTick?定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM看完是不是有一堆问号?我们从中找出来产生问号的关键词下次 DOM 更新循环结束之后是什么时候?执行延迟回调?更新后的 DOM?我们从上面三个疑问大胆猜想一下vue 更新DOM是有策略的,不是同步更新nextTick 可以接收一个函数做为入参nextTick 后能拿到最新的数据那么nextTick 是怎么做到的呢?这涉及到了 js 的执行机制。JS原创 2022-02-21 10:04:14 · 1391 阅读 · 0 评论 -
【VUE3源码学习】nextTick 实现原理
什么是nextTick?定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM原创 2022-02-15 16:36:44 · 4228 阅读 · 1 评论 -
【VUE3源码学习】Vue3在CreateApp时,做了什么?
CreateApp时发生了什么?写在前面每个 Vue 应用都是通过用createApp函数创建一个新的应用实例开始的,一般在Vue项目中main.js进行实例化:const app = Vue.createApp({ /* 选项 */ data() { return { count: 4 } }})app.use(store).use(router).mount('#app')传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。原创 2022-02-09 16:48:22 · 1686 阅读 · 0 评论