实现步骤 一、responsive 的实现 二、effect 的实现 三、responsive 与 effect 的结合 run 的实现 触发依赖收集与派发更新 依赖收集的实现 派发更新 四、computed 的实现 完整代码 流程图 git 地址： https://github.com/dirkhe1051931999/common-demo/tree/master/vue3-responsiv…

数据获取 API root state 的获取是从 store.state 获取，如果有 module，那么就从 store.state.a 中获取，其中 a 是 module 的 key 获取 module 的数据本质上通过 module 名的 path 去访问到当前 module 的 state 一般获取 state 是通过 store.getters 方法，执行 store.getters，…

import vuex 的初始化：安装与 Store 实例化 安装 通过 mixin 的方式在组件 beforeCreate 生命周期的时候往组件注册$store Store 实例化 import Vuex from "vuex" 会实例化 Store 对象，并且返回 store 实例，传入 new Vue 的 options 中，并且往 Store 的构造函数传入 actio…

数据驱动 DOM，DOM 的变化也会影响数据 input 中 v-model 的原理 input 中的 v-model 如何使用 源码 组件 中 v-model 的原理 组件中的 v-model 如何使用 源码 v-model 的本质 对于 input，v-model="account" 是一个语法糖，通过设置一个 :value="account"，并设置一…

DOM 事件与自定义事件如何用 DOM 事件与自定义事件从编译到生成事件对象的阶段 编译 addHandler 生成代码数据 DOM 事件执行时做了什么 自定义事件都做了什么 父子组件通信的实质 子组件通过父组件传入 listener，去通过$on方式去添加，当$emit 的时候会去执行这个添加的函数。 $emit是往自身派发事件，$emit 是往 vue 实例派发事件，子组件调用$emit 方法…

为什么要使用骨架屏 白屏问题一直是前端的痛点，在使用 vue SPA 中，经常会遇到白屏时间过长导致用户体验的差的情况，如何解决这个问题？大部分同学可能会想到优化 webpack、优化网络请求等。实际上，有一部分用户因为网络问题或其他问题，导致了页面速度加载缓慢，等待时间过长，这部分用户可能还没意识到是自己“硬件”问题，他们期待 2 秒内页面加载完成。显然刚才说的优化方案不是理想方案。 以往的方案…

代码 执行 结果

将 AST 深度遍历，根据不同条件生成 _c(),_l(),_e(),_l(),_v() 等 render 代码字符串，最后通过 createFunction()方法转成函数 代码片段 CodegenState 定义 获取 modules 里面的函数，比如 genData，transformCode 等 genElement() 判断当前 ast 属性，执行不同代码，生成不同代码串 genIf()…

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…

代码 执行 把 parse 的结果进行静态节点标记 结果 参考 剖析 Vue.js 内部运行机制

代码 执行 结果 参考 剖析 Vue.js 内部运行机制

优化一些不依赖响应式数据的 AST，具体是做了标记静态节点和标记静态根，如果是静态节点，DOM 永远不需要改变。这样标记的目的是对模版更新做性能优化 代码片段 入口 标记静态节点，静态节点的特点 是纯文本 普通元素有 v-pre 指令 没有使用 v-if，v-for，非 v-once 外的其他指令，非内置组件，是平台保留标签，没带 v-for 的 template 标签的直接节点，所有属性都是静态…

解析模板，生成 AST 的过程 parse 的目的 把 template 解析成 AST,AST 是一个对象，parse 过程包括，从 option 中取参数，parseHTML，retrun rootElement parseHTML 对 template 进行正则匹配，每匹配到一个标签或属性都会 advance，并剔除已经匹配的字符串，在匹配的过程中，解析出开始标签，闭合标签，属性(attrs…

编译方式 模版->真实 DOM 的渲染过程中,有把模版编译成 render 函数，这个过程就叫编译 vue 提供了两种编译方法：Runtime + Compiler 和 Runtime only Runtime + Compiler:如果在 vue 对象中用了 template，在运行中就可以编译的 Runtime only:在编译阶段把.vue 文件编译成 rener 函数 编译入口 $moun…

图片来自： https://ustbhuangyi.github.io/vue-analysis/reactive/summary.html 核心去观测数据的变化，当数据变化以后，能通知对应的观察者，来实行相关的逻辑 Dep 的实现是最核心，实际上连接数据与对应观察者的桥梁 Vue 初始化的时候，对不同指令对应的属性做处理，对于 data 和 props，会通过 observer 和 define…

响应式数据发生变化，触发渲染 watcher 的回调函数，进而执行组件的更新过程 组件更新过程 组件更新过程是新旧 vnode diff 的过程 新旧节点不相同：1. 创建新节点 2.更新父占位符节点 3.删除旧节点 新旧节点相同：1. 获取他们 children，根据不同情况做不同的更新逻辑 最复杂是新旧节点相同，而且都存在子节点，会执行 updateChildren diff 算法 源码 组件…

watch 是基于 Watcher 实例实现的，是一个 user watcher，支持不同类型 watcher 的 4 个类型 deep watcher 为了监听对象的子属性的变化，所以在 watch 中设置 deep:true 属性，实际上会 触发 traverse 函数,traverse 函数是对对象做深层遍历，遍历就会触发子对象的 getter，这样就依赖收集，订阅子对象的 watcher，…

computed 示例 初始化 computed watcher 实例的构造函数 执行 watcher.depend() 执行 watcher.evaluate() 去求值 computed watcher 依赖的数据变化后会触发 setter 过程，通知所有订阅它变化的 watcher，执行 watcher.update() computed 是什么 computed 实际上是一个 comput…

之前有写了 一篇博客 ，给出了，通过数组下标给数组添加元素、修改数组长度或者直接对对象的属性的添加或删除，但是数据没变成响应式解决方法，并且讲解了为什么 vue3.0 不再使用 Object.defineProperty 而使用 Proxy 的实现依赖收集和派发更新原因 ，那么就从源码角度分析下，为什么上述操作对象或者数组，数据没有变成响应式的，但可以通过 Vue.set 或者 this.$set…

什么是 tick js 引擎执行过程的运行机制 nextTick 是什么 数据从依赖收集到派发更新用到了 nextTick 机制，数据的变化到 DOM 的重新渲染是一个异步的过程，发生在下一个 tick nextTick 把要执行的任务都推到一个队列中，统一在下一个 nextTick 中执行 数据更改触发渲染 watcher 的 update，渲染 watcher 的 flushScheduler…