vue3 的数据响应原理和实现
实现步骤 一、responsive 的实现 二、effect 的实现 三、responsive 与 effect 的结合 run 的实现 触发依赖收集与派发更新 依赖收集的实现 派发更新 四、computed 的实现 完整代码 流程图 git 地址： https://github.com/dirkhe1051931999/common-demo/tree/master/vue3-responsiv…
最新文章
分类全部
标签全部
你想要的 vue 源码分析 · 33
数据获取 API root state 的获取是从 store.state 获取，如果有 module，那么就从 store.state.a 中获取，其中 a 是 module 的 key 获取 module 的数据本质上通过 module 名的 path 去访问到当前 module 的 state 一般获取 state 是通过 store.getters 方法，执行 store.getters，…
你想要的 vue 源码分析 · 32
import vuex 的初始化：安装与 Store 实例化 安装 通过 mixin 的方式在组件 beforeCreate 生命周期的时候往组件注册$store Store 实例化 import Vuex from "vuex" 会实例化 Store 对象，并且返回 store 实例，传入 new Vue 的 options 中，并且往 Store 的构造函数传入 actio…
你想要的 vue 源码分析 · 31
数据驱动 DOM，DOM 的变化也会影响数据 input 中 v-model 的原理 input 中的 v-model 如何使用 源码 组件 中 v-model 的原理 组件中的 v-model 如何使用 源码 v-model 的本质 对于 input，v-model="account" 是一个语法糖，通过设置一个 :value="account"，并设置一…
你想要的 vue 源码分析 · 30
DOM 事件与自定义事件如何用 DOM 事件与自定义事件从编译到生成事件对象的阶段 编译 addHandler 生成代码数据 DOM 事件执行时做了什么 自定义事件都做了什么 父子组件通信的实质 子组件通过父组件传入 listener，去通过$on方式去添加，当$emit 的时候会去执行这个添加的函数。 $emit是往自身派发事件，$emit 是往 vue 实例派发事件，子组件调用$emit 方法…
vue-cli3 中使用骨架屏
为什么要使用骨架屏 白屏问题一直是前端的痛点，在使用 vue SPA 中，经常会遇到白屏时间过长导致用户体验的差的情况，如何解决这个问题？大部分同学可能会想到优化 webpack、优化网络请求等。实际上，有一部分用户因为网络问题或其他问题，导致了页面速度加载缓慢，等待时间过长，这部分用户可能还没意识到是自己“硬件”问题，他们期待 2 秒内页面加载完成。显然刚才说的优化方案不是理想方案。 以往的方案…
你想要的 vue 源码分析 · 29
代码 执行 结果
你想要的 vue 源码分析 · 28
将 AST 深度遍历，根据不同条件生成 _c(),_l(),_e(),_l(),_v() 等 render 代码字符串，最后通过 createFunction()方法转成函数 代码片段 CodegenState 定义 获取 modules 里面的函数，比如 genData，transformCode 等 genElement() 判断当前 ast 属性，执行不同代码，生成不同代码串 genIf()…
vue 组件通信的 6 种方式
props/$emit eventBus $attrs/$listeners provide/inject $ref vuex demo 地址 定义父子关系 a.vue 是父组件，b.vue 是 a.vue 的子组件，c.vue 和 d.vue 是兄弟组件，是 b.vue 的子组件 props/$emit a.vue b.vue 实现效果 eventBus vue1.x 的 API， bus.js…
你想要的 vue 源码分析 · 27
代码 执行 把 parse 的结果进行静态节点标记 结果 参考 剖析 Vue.js 内部运行机制
你想要的 vue 源码分析 · 26
代码 执行 结果 参考 剖析 Vue.js 内部运行机制
你想要的 vue 源码分析 · 25
优化一些不依赖响应式数据的 AST，具体是做了标记静态节点和标记静态根，如果是静态节点，DOM 永远不需要改变。这样标记的目的是对模版更新做性能优化 代码片段 入口 标记静态节点，静态节点的特点 是纯文本 普通元素有 v-pre 指令 没有使用 v-if，v-for，非 v-once 外的其他指令，非内置组件，是平台保留标签，没带 v-for 的 template 标签的直接节点，所有属性都是静态…
你想要的 vue 源码分析 · 24
解析模板，生成 AST 的过程 parse 的目的 把 template 解析成 AST,AST 是一个对象，parse 过程包括，从 option 中取参数，parseHTML，retrun rootElement parseHTML 对 template 进行正则匹配，每匹配到一个标签或属性都会 advance，并剔除已经匹配的字符串，在匹配的过程中，解析出开始标签，闭合标签，属性(attrs…
你想要的 vue 源码分析 · 23
编译方式 模版->真实 DOM 的渲染过程中,有把模版编译成 render 函数，这个过程就叫编译 vue 提供了两种编译方法：Runtime + Compiler 和 Runtime only Runtime + Compiler:如果在 vue 对象中用了 template，在运行中就可以编译的 Runtime only:在编译阶段把.vue 文件编译成 rener 函数 编译入口 $moun…
你想要的 vue 源码分析 · 22
图片来自： https://ustbhuangyi.github.io/vue-analysis/reactive/summary.html 核心去观测数据的变化，当数据变化以后，能通知对应的观察者，来实行相关的逻辑 Dep 的实现是最核心，实际上连接数据与对应观察者的桥梁 Vue 初始化的时候，对不同指令对应的属性做处理，对于 data 和 props，会通过 observer 和 define…
你想要的 vue 源码分析 · 21
响应式数据发生变化，触发渲染 watcher 的回调函数，进而执行组件的更新过程 组件更新过程 组件更新过程是新旧 vnode diff 的过程 新旧节点不相同：1. 创建新节点 2.更新父占位符节点 3.删除旧节点 新旧节点相同：1. 获取他们 children，根据不同情况做不同的更新逻辑 最复杂是新旧节点相同，而且都存在子节点，会执行 updateChildren diff 算法 源码 组件…
你想要的 vue 源码分析 · 20
watch 是基于 Watcher 实例实现的，是一个 user watcher，支持不同类型 watcher 的 4 个类型 deep watcher 为了监听对象的子属性的变化，所以在 watch 中设置 deep:true 属性，实际上会 触发 traverse 函数,traverse 函数是对对象做深层遍历，遍历就会触发子对象的 getter，这样就依赖收集，订阅子对象的 watcher，…
你想要的 vue 源码分析 · 19
computed 示例 初始化 computed watcher 实例的构造函数 执行 watcher.depend() 执行 watcher.evaluate() 去求值 computed watcher 依赖的数据变化后会触发 setter 过程，通知所有订阅它变化的 watcher，执行 watcher.update() computed 是什么 computed 实际上是一个 comput…
你想要的 vue 源码分析 · 18
之前有写了 一篇博客 ，给出了，通过数组下标给数组添加元素、修改数组长度或者直接对对象的属性的添加或删除，但是数据没变成响应式解决方法，并且讲解了为什么 vue3.0 不再使用 Object.defineProperty 而使用 Proxy 的实现依赖收集和派发更新原因 ，那么就从源码角度分析下，为什么上述操作对象或者数组，数据没有变成响应式的，但可以通过 Vue.set 或者 this.$set…
你想要的 vue 源码分析 · 17
什么是 tick js 引擎执行过程的运行机制 nextTick 是什么 数据从依赖收集到派发更新用到了 nextTick 机制，数据的变化到 DOM 的重新渲染是一个异步的过程，发生在下一个 tick nextTick 把要执行的任务都推到一个队列中，统一在下一个 nextTick 中执行 数据更改触发渲染 watcher 的 update，渲染 watcher 的 flushScheduler…
已显示 20 / 37 篇文章
也可以浏览：全部文章档
确认评论邮箱
邀请制评论