Vue
文章平均质量分 59
Jackson Mseven
这个作者很懒,什么都没留下…
展开
-
10w 字前端技术文档分析
在 2023 年 11 月份,有小伙伴跟我说前端学习得很迷茫,不知道该学什么,也不知道已经学过的学得怎么样,于是,我立即萌生了一种想法,我要写一份。经历了 2 个多月的不断努力,终于,我的文档在今天达到了。,既可以帮助我自己查漏补缺,也可以帮助到其他人。文档发布在飞书上,可以通过。,进行查看,文档可以。原创 2024-01-20 16:08:07 · 585 阅读 · 0 评论 -
Vue3 源码解读系列(十五)——编译
AST 转换其实就是语法分析阶段,把 AST 节点做一层转换,构造出语义化更强信息更丰富的 codegenCode,它在后续的代码生成阶段起非常重要的作用。问题:静态提升的好处是针对静态节点不用每次在 render 阶段都执行一次 createVNode 创建 vnode 对象,但它有没有成本呢?语法,即:组件可以有多个根节点,但是树状结构只能有一个根节点,所以需要在外层套一个虚拟节点。答:AST 是抽象语法树,用于描述节点在模板中完整的映射信息。问题:为什么 AST 的根节点是虚拟节点?原创 2023-11-20 22:14:12 · 332 阅读 · 0 评论 -
Vue3 源码解读系列(十四)——内置组件
*** Teleport 组件定义*/// 组件创建和更新// 创建逻辑} else {// 更新逻辑},// 组件删除// 删除逻辑},* KeepAlive 组件定义*/// 用户自定义的配置props: {include: [String, RegExp, Array], // 包含exclude: [String, RegExp, Array], // 不包含max: [String, Number], // 最大缓存个数(默认不限制个数)},原创 2023-11-20 22:11:12 · 288 阅读 · 0 评论 -
Vue3 源码解读系列(十三)——双向数据绑定 v-model
通过监听 change 或 input 事件实现。通过 prop 实现。原创 2023-11-20 22:08:57 · 430 阅读 · 0 评论 -
Vue3 源码解读系列(十二)——指令 directive
定义:本质就是一个 JavaScript 对象,对象上挂着一些钩子函数。实现:在元素的生命周期中注入代码。原创 2023-11-20 22:06:44 · 224 阅读 · 0 评论 -
Vue3 源码解读系列(十一)——插槽 slot
把父组件中编写的插槽内容保存到一个对象上,并且把具体渲染 DOM 的代码用函数的方式封装,然后在子组件渲染的时候,根据插槽名在对象中找到对应的函数,然后执行这些函数做真正的渲染。插槽的实现实际上就是一种。原创 2023-11-20 21:59:34 · 221 阅读 · 0 评论 -
Vue3 源码解读系列(十)——props/emit
props 的作用:允许组件的使用者在外部传递,实现各种各样的功能。原创 2023-11-20 21:55:14 · 98 阅读 · 0 评论 -
Vue3 源码解读系列(九)——依赖注入
祖先组件不需要知道哪些后代组件在使用它提供的数据。依赖注入用于祖先组件向后代组件传递数据。后代组件也不需要知道注入的数据来自哪里。原创 2023-11-20 21:51:37 · 83 阅读 · 0 评论 -
Vue3 源码解读系列(八)——生命周期
【代码】Vue3 源码解读系列(八)——生命周期。原创 2023-11-20 17:35:48 · 103 阅读 · 0 评论 -
Vue3 源码解读系列(七)——侦听器
侦听器是当侦听的对象或者函数发生了变化则自动执行某个回调函数。侦听器的内部设计:侦听响应式数据的变化,内部创建 effect runner,首次执行 runner 做依赖收集,然后在数据发生变化后,以某种调度方式去执行回调函数。调用侦听器的两种方式:通过 Composition API通过sourcesourcerefreactivefunctionsourcerefgettersourcereactivesourcegetterdeeptruesourcecbwatch APIcbgetter。原创 2023-11-20 17:32:43 · 90 阅读 · 0 评论 -
Vue3 源码解读系列(六)——计算属性
可以正常返回,但是可能会影响用户体验,例如:在回调函数中通过 setTimeout 将某个依赖变量进行更改,此时页面会先展示定时器执行前的结果,等定时器执行完成后,页面会重新渲染。内部会缓存上次的计算结果 value,而且只有 dirty 为 true 时才会重新计算,如果访问计算属性时 dirty 为 false,那么直接返回这个 value。由于 async 定义的函数返回的是 promise,所以虽然内部的执行同步了,但是不能达到我们想要的效果,不会报错,但几乎可以视为不行。原创 2023-11-20 17:29:12 · 53 阅读 · 0 评论 -
Vue3 源码解读系列(五)——响应式
响应式的本质是。映射到组件的实现就是,当数据变化后,会自动触发组件的重新渲染。原创 2023-11-15 09:51:48 · 87 阅读 · 0 评论 -
Vue3 源码解读系列(四)——组件更新
的节点,需要遍历对应的序列,如果在遍历旧子序列的过程中需要判断某个节点是否在新子序列中存在,这就需要双重循环,双重循环的复杂度是 O(n。“ 来实现,贪心的时间复杂度为 O(n),二分查找的时间复杂度 O(logn),总时间复杂度为 O(nlogn)。对比新旧子序列中的节点,key 相同的就是同一个节点,执行执行 patch 更新即可。相对来说,这些操作中最麻烦的就是移动,既要判断哪些节点需要移动,也要清除如何移动。),为了优化这个复杂度,建立索引图,把时间复杂度降低到 O(n)。建立索引图(空间换时间)原创 2023-11-11 23:33:05 · 240 阅读 · 0 评论 -
Vue3 源码解读系列(三)——组件渲染
组件 vnode 主要维护着组件的定义对象,组件上的各种 props,而组件本身是一个抽象节点,它自身的渲染其实是通过执行组件定义的 render 渲染函数生成的子树 vnode 来完成,然后再通过 patch 这种递归的方式,无论组件的嵌套层级多深,都可以完成整个组件树的渲染。:因为 patch vnode 的过程不同平台可以有自己的实现,基于 vnode 再做服务端渲染、weex 平台、小程序平台的渲染。:引入 vnode,可以把渲染过程抽象化,从而使得组件的抽象能力也得到提升。原创 2023-11-11 21:35:40 · 482 阅读 · 0 评论 -
Vue3 源码解读系列(二)——初始化应用实例
方法是一个标准的可跨平台的组件渲染流程,因此需要根据具体场景进行定制化。答:因为 Vue 不仅仅是为 Web 平台服务,它的目标是。创建 Vue 实例对象。来创建 app 对象。原创 2023-11-11 17:33:15 · 314 阅读 · 0 评论 -
Vue3 源码解读系列(一)——Vue3的优化
使用 monorepo 管理代码将各模块拆分到不同的 package 中,每个 package 有各自的 API、类型定义和测试,使得模块拆分更加细化,模块之间的依赖也更加明确。使用 TypeScript 开发代码。原创 2023-11-11 17:28:38 · 125 阅读 · 0 评论 -
Vue 传参踩坑之旅——事件总线与 props
这个 bug 其实给了我蛮多启发的,也能理解之前看到别人说业务组件中尽量使用了,事件总线的原理我其实是知道的,但是还是会产生这种 bug,因为随着业务的发展,新功能的产生以及老功能的优化等都可能对原来的数据结构或组件结构进行更改,在我们写业务代码时是比较难精准的预料到未来的变化的,此时就需要我们的代码有足够高的容错性,诸如、事件总线等组件通信方式固然很方便,但是在代码重构或其他一些比较重大改动时项目的数据流又会变得难以预测。代码量会变得更多、冗余组件数据流变得清晰当项目结构发生变化时重构会更简单。原创 2023-11-07 11:31:38 · 133 阅读 · 0 评论 -
pinia踩坑之旅——在组件外使用pinia
我们在使用一项不熟悉的技术时往往都是去网上找一篇使用文章看下用法就上手了,这么做的好处时能够最快速的上手在项目中进行使用,但是这类文章往往只会把基本的用法进行描述,而不会把一些坑点说出来,如果在使用时恰好遇到了就非常棘手。我推荐三种我日常使用的比较多的解决办法,以及各自的优缺点:百度没错,你没有看错,就是百度,就是这么朴实无华。把报错复制到百度直接搜结果,如果不是一些比较冷门或者先进的技术问题都能搜得到。优点:速度最快缺点:网上资料质量参差不全,容易遇到一些 ly 文章很耗费时间官网。原创 2023-10-19 17:31:00 · 1191 阅读 · 3 评论 -
Vue修饰符
表单修饰符用在v-model上.lazy.trim.number。原创 2023-07-03 00:08:52 · 40 阅读 · 0 评论 -
Vue(2 | 3) 生命周期
Vue生命周期原创 2023-05-18 17:09:27 · 91 阅读 · 0 评论 -
MVC与MVVM
MVC与MVVM原创 2023-05-16 16:34:13 · 53 阅读 · 0 评论