- 博客(8)
- 收藏
- 关注
RSS订阅原创 vue组件渲染流程源码分析
组件渲染主要分为分为两步, 一是创建组件对应的虚拟dom 二是将组件所生成的真实dom插入到父组件的组件标签所对应的位置。这块不需要先懂为什么这样做。我会再重新对这块再说一下。现在只需要有个印象就行。
2025-02-27 16:05:34
1509
原创 Vue.extend源码分析
Vue.options 指的是定义的一些全局组件, 指令这种, 比如 Vue.components(‘aaa’, {}), Vue.components(‘aaa’, {})就等同于 Vue.options.components.aaa = {}, 源码内部就是这样实现的, 所以 Vue 会将全局的一些东西全部放到 Vue.options 里面。(5). 最后再将Sub构造函数返回, 这个就是Vue.extend的基本原理, 大概也就三步, 1创建构造函数 2改变构造函数原型指向Vue 3合并全局属性。
2025-02-24 19:20:59
1282
原创 vue computed和watch区别(从源码角度区分)
(2).computed不支持异步返回数据, 原因在于computed内部是执行evaluate方法, 拿到value值, 直接返回value的, 支持异步就是说computed函数中异步返回数据, 深点就是watcher中的getter方法需要异步返回数据, 这显然是不可能得, 都是同步返回, 即使是有异步操作, 也是先返回undefined的,1.watch的实现本质上也是通过watcher来实现的, 这里不讨论底层实现的所有核心, 只会说明其大概内部的运行原理, 理解本质即可。
2025-02-21 18:10:39
1765
原创 手写一个简单的promise
/ (1) 没有对应的后续处理即then中没有对应状态的后续处理回调函数, 则then所对应的promise就吸收之前的promise的状态。// c 后续处理中返回的是一个promise, 则外部的promise吸收return返回的promise的状态。// then函数返回一个promise, 返回的promise的状态需要根据then方法回调函数的执行结果来处理。// (1) then中没有对应的后续处理, 则then返回的promise状态与promise的状态一致。
2025-02-21 16:46:51
603
原创 vue源码的解读(数据劫持、模板解析、虚拟dom转真实dom、diff、dep、watcher、nextTick、计算属性watcher)
继续开始下一个循环, 此时template字符串已经截掉一截, 之后开始继续匹配, 以<开头, 匹配开标签正则匹配成功, 创建一个ast对象设置对象的tag和type 匹配属性正则成功将其添加到ast对象的props里面, 然后将这个对象添加到外部的数组里面, 然后看一下这个数组里面的这个对象前面是否有对象存在, 如果有就表示, 这个对象是数组的前一个对象的children, 拿到前一个对象, 将当前这个对象添加到前一个对象的children里面,
2025-02-21 10:59:04
574
原创 vue整体流程
7.给每一个对象/数组添加dep 实现数组修改页面刷新 $set也会通过对象dep来实现。5.这样实现会导致数据同步更新 页面也会同步渲染 所以通过异步更新的方式来实现页面渲染。4.为属性添加dep 组件添加wather dep wather相互依赖 实现响应式。3.执行render 生成虚拟dom 虚拟dom转真实dom。6.vue 页面异步更新 nextTick实现 优雅降级。8.实现vue.mixin混入 自定义混入规则。2.模版编译成ast ast转render。1.data添加数据劫持。
2024-04-26 16:13:49
162
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人