首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
踏歌笙
掘友等级
VIP.5 如鱼得水
狗粮品尝师
|
江城之光
获得徽章 7
动态
文章
专栏
沸点
收藏集
关注
作品
赞
82
文章 53
沸点 29
赞
82
返回
|
搜索文章
踏歌笙
赞了这篇文章
云浪
3月前
关注
认识 React、Vue2、Vue3 三者的 diff 算法与对比
React Diff 算法 认识 React Diff 算法 React 是 Fiber 架构的,Fiber 其实是一个链表的结构,但是由于没有设置反向指针,因此没有使用双...
45
3
分享
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
如何理解reactive、ref 、toRef 和 toRefs?
ref: 函数可以接收原始数据类型与引用数据类型。- ref函数创建的响应式数据,在模板中可以直接被使用,在 JS 中需要通过 .value 的形式才能使用。
reactive: 函数只能接收引用数据类型。
toRef:针对一个响应式对象的属性创建一个ref,使得该属性具有响应式,两者之间保持引用关系。(入下所示,即让state中的age属性具有响应式)
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
Vue 3 中新增了teleport(瞬移)组件,可以将组件的 DOM 插到指定的组件层,而不是默认的父组件层,可以用于在应用中创建模态框、悬浮提示框、通知框等组件。
Teleport 组件可以传递两个属性:
to (必填):指定组件需要挂载到的 DOM 节点的 ID,如果使用插槽的方式定义了目标容器也可以传入一个选择器字符串。
disabled (可选):一个标志位指示此节点是否应该被瞬移到目标中,一般情况下,这个 props 建议设为一个响应式变量来控制 caption 是否展示。
展开
技术交流圈
赞过
分享
评论
1
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
Vue3如何实现响应式?
使用Proxy和Reflect API实现vue3响应式。
Reflect API则可以更加方便地实现对对象的监听和更新,可以用来访问、检查和修改对象的属性和方法,比如Reflect.get、Reflect.set、Reflect.has等。
Vue3会将响应式对象转换为一个Proxy对象,并利用Proxy对象的get和set拦截器来实现对属性的监听和更新。当访问响应式对象的属性时,get拦截器会被触发,此时会收集当前的依赖关系,并返回属性的值;当修改响应式对象的属性时,set拦截器会被触发,此时会触发更新操作,并通知相关的依赖进行更新。
优点:可监听属性的变化、新增与删除,监听数组的变化
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
Vue3为什么比Vue2快?
响应式系统优化:Vue3引入了新的响应式系统,这个系统的设计让Vue3的渲染函数可以在编译时生成更少的代码,这也就意味着在运行时需要更少的代码来处理虚拟DOM。这个新系统的一个重要改进就是提供了一种基于Proxy实现的响应式机制,这种机制为开发人员提供更加高效的API,也减少了一些运行时代码。
编译优化:Vue3的编译器对代码进行了优化,包括减少了部分注释、空白符和其他非必要字符的编译,同时也对编译后的代码进行了懒加载优化。
更快的虚拟DOM:Vue3对虚拟DOM进行了优化,使用了跟React类似的Fiber算法,这样可以更加高效地更新DOM节点,提高性能。
Composition API:Vue3引入了Composition API,这种API通过提供逻辑组合和重用的方法来提升代码的可读性和重用性。这种API不仅可以让Vue3应用更好地组织和维护业务逻辑,还可以让开发人员更加轻松地实现优化。
展开
技术交流圈
赞过
分享
评论
2
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
vue2和vue3 核心 diff 算法区别?
Vue 2.x使用的是双向指针遍历的算法,也就是通过逐层比对新旧虚拟DOM树节点的方式来计算出更新需要做的最小操作集合。但这种算法的缺点是,由于遍历是从左到右、从上到下进行的,当发生节点删除或移动时,会导致其它节点位置的计算出现错误,因此会造成大量无效的重新渲染。
Vue 3.x使用了经过优化的单向遍历算法,也就是只扫描新虚拟DOM树上的节点,判断是否需要更新,跳过不需要更新的节点,进一步减少了不必要的操作。此外,在虚拟DOM创建后,Vue 3会缓存虚拟DOM节点的描述信息,以便于复用,这也会带来性能上的优势。同时,Vue 3还引入了静态提升技术,在编译时将一些静态的节点及其子节点预先处理成HTML字符串,大大提升了渲染性能。
因此,总体来说,Vue 3相对于Vue 2拥有更高效、更智能的diff算法,能够更好地避免不必要的操作,并提高了渲染性能。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
如何看待Composition API 和 Options API?
Composition API和Options API是Vue.js中的两种组件编写方式。
Options API是Vue.js早期版本中使用的编写方式,通过定义一个options对象进行组件的配置,包括props、data、methods、computed、watch等选项。这种方式的优点在于结构清晰、易于理解,在小型项目中比较实用。
Composition API是Vue.js 3.x版本中新引入的一种组件编写方式,它以函数的形式组织我们的代码,允许我们将相关部分组合起来,提高了代码的可维护性和重用性。Composition API还提供了模块化、类型推断等功能,可以更好地实现面向对象编程的思想。
Composition API 更好的代码组织,更好的逻辑服用;可维护性,更好的类型推导,可拓展性更好;
两种API各有优缺点,使用哪种API取决于具体的项目需求。对于小型项目,Options API更为简单方便;对于大型项目,Composition API可以更好地组织代码。
总之,Vue.js的Composition API和Options API是为了满足不同开发者的需求而存在的,我们应该根据具体的场景选择使用哪种API,以达到更好的开发效果和代码质量。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
webpack的作用其实有以下几点:
模块打包。可以将不同模块的文件打包整合在一起,并且保证它们之间的引用正确,执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块,保证项目结构的清晰和可读性。
编译兼容。在前端的“上古时期”,手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情,而在今天这个问题被大大的弱化了,通过webpack的Loader机制,不仅仅可以帮助我们对代码做polyfill,还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件,让我们在开发的时候可以使用新特性和新语法做开发,提高开发效率。
能力扩展。通过webpack的Plugin机制,我们在实现模块化打包和编译兼容的基础上,可以进一步实现诸如按需加载,代码压缩等一系列功能,帮助我们进一步提高自动化程度,工程效率以及打包输出的质量。
展开
技术交流圈
赞过
分享
评论
2
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
React 性能优化手段
使用 React.memo 来缓存组件。
使用 React.useMemo 缓存大量的计算。
避免使用匿名函数。
利用 React.lazy 和 React.Suspense 延迟加载不是立即需要的组件。
尽量使用 CSS 而不是强制加载和卸载组件。
使用 React.Fragment 避免添加额外的 DOM。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
React.useCallback() 和 React.useMemo() 的区别
useCallback 可缓存函数,其实就是避免每次重新渲染后都去重新执行一个新的函数。
useMemo 可缓存值。
有很多时候,我们在 useEffect 中使用某个定义的外部函数,是要添加到 deps 数组中的,如果不用 useCallback 缓存,这个函数在每次重新渲染时都是一个完全新的函数,也就是引用地址发生了变化,这就会导致 useEffect 总会无意义的执行。
展开
技术交流圈
赞过
分享
评论
1
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
React.memo() 和 React.useMemo() 的区别
memo 是一个高阶组件,默认情况下会对 props 进行浅比较,如果相等不会重新渲染。多数情况下我们比较的都是引用类型,浅比较就会失效,所以我们可以传入第二个参数手动控制。
useMemo 返回的是一个缓存值,只有依赖发生变化时才会去重新执行作为第一个参数的函数,需要记住的是,useMemo 是在 render 阶段执行的,所以不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
useEffect 依赖为空数组与 componentDidMount 区别
在 render 执行之后,componentDidMount 会执行,如果在这个生命周期中再一次 setState ,会导致再次 render ,返回了新的值,浏览器只会渲染第二次 render 返回的值,这样可以避免闪屏。
但是 useEffect 是在真实的 DOM 渲染之后才会去执行,这会造成两次 render ,有可能会闪屏。
实际上 useLayoutEffect 会更接近 componentDidMount 的表现,它们都同步执行且会阻碍真实的 DOM 渲染的。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
git merge与git rebase的区别
虽然merge和rebase都可以将一个分支的修改合并到另一个分支上,但它们的实现方式和结果有所不同。下面是merge和rebase的区别:
历史记录的形状不同:merge会创建一个新的提交,这个提交包含了两个分支的修改,因此两个分支的历史记录是并行的;而rebase会将当前分支的修改“重演”一遍,因此两个分支的历史记录是线性的。
冲突的处理方式不同:merge会将冲突的修改合并到一个新的提交上,而rebase会将冲突的修改应用到目标分支上。
对分支的影响不同:merge会保留两个分支的名称和历史记录,而rebase会将当前分支的历史记录“移动”到目标分支上。
综上所述,merge和rebase都有各自的优缺点,具体使用哪种方式要根据实际情况而定。如果两个分支的历史记录比较重要,或者有多个人在同时修改同一份代码,那么使用merge可能更好;如果想要保持历史记录的线性,并且希望分支的名称和历史记录更加清晰,那么使用rebase可能更好
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
useEffect 和 useLayoutEffect 区别
对于 React 的函数组件来说,其更新过程大致分为以下步骤:
因为某个事件 state 发生变化。
React 内部更新 state 变量。
React 处理更新组件中 return 出来的 DOM 节点(进行一系列 dom diff 、调度等流程)。
将更新过后的 DOM 数据绘制到浏览器中。
用户看到新的页面。
useEffect 在第 4 步之后执行,且是异步的,保证了不会阻塞浏览器进程。
useLayoutEffect 在第 3 步至第 4 步之间执行,且是同步代码,所以会阻塞后面代码的执行。
展开
技术交流圈
赞过
分享
评论
2
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
对函数式编程的理解
总结一下:
函数式编程有两个核心概念。
数据不可变(无副作用): 它要求你所有的数据都是不可变的,这意味着如果你想修改一个对象,那你应该创建一个新的对象用来修改,而不是修改已有的对象。
无状态: 主要是强调对于一个函数,不管你何时运行,它都应该像第一次运行一样,给定相同的输入,给出相同的输出,完全不依赖外部状态的变化。
纯函数带来的意义。
便于测试和优化:这个意义在实际项目开发中意义非常大,由于纯函数对于相同的输入永远会返回相同的结果,因此我们可以轻松断言函数的执行结果,同时也可以保证函数的优化不会影响其他代码的执行。
可缓存性:因为相同的输入总是可以返回相同的输出,因此,我们可以提前缓存函数的执行结果。
更少的 Bug:使用纯函数意味着你的函数中不存在指向不明的 this,不存在对全局变量的引用,不存在对参数的修改,这些共享状态往往是绝大多数 bug 的源头。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
setState 同步还是异步
setState 本身代码的执行肯定是同步的,这里的异步是指是多个 state 会合成到一起进行批量更新。
同步还是异步取决于它被调用的环境。
如果 setState 在 React 能够控制的范围被调用,它就是异步的。比如合成事件处理函数,生命周期函数, 此时会进行批量更新,也就是将状态合并后再进行 DOM 更新。
如果 setState 在原生 JavaScript 控制的范围被调用,它就是同步的。比如原生事件处理函数,定时器回调函数,Ajax 回调函数中,此时 setState 被调用后会立即更新 DOM 。
展开
技术交流圈
赞过
分享
评论
1
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
GET 和 POST 的区别。
从缓存的角度,GET 请求会被浏览器主动缓存下来,留下历史记录,而 POST 默认不会。
从编码的角度,GET 只能进行 URL 编码,只能接收 ASCII 字符,而 POST 没有限制。
从参数的角度,GET 一般放在 URL 中,因此不安全,POST 放在请求体中,更适合传输敏感信息。
从幂等性的角度,GET 是幂等的,而 POST 不是。(幂等表示执行相同的操作,结果也是相同的)
从 TCP 的角度,GET 请求会把请求报文一次性发出去,而 POST 会分为两个 TCP 数据包,首先发 header 部分,如果服务器响应 100(continue), 然后发 body 部分。(火狐浏览器除外,它的 POST 请求只发一个 TCP 包)
展开
技术交流圈
分享
1
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
浏览器的垃圾回收机制
有两种垃圾回收策略:
标记清除:标记阶段即为所有活动对象做上标记,清除阶段则把没有标记(也就是非活动对象)销毁。
引用计数:它把对象是否不再需要简化定义为对象有没有其他对象引用到它。如果没有引用指向该对象(引用计数为 0),对象将被垃圾回收机制回收。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
async/await 和 Promise 的关系
async/await 是消灭异步回调的终极武器。
但和 Promise 并不互斥,反而,两者相辅相成。
执行 async 函数,返回的一定是 Promise 对象。
await 相当于 Promise 的 then。
tru...catch 可捕获异常,代替了 Promise 的 catch。
展开
技术交流圈
分享
评论
点赞
踏歌笙
VIP.5 如鱼得水
狗粮品尝师 @江城之光
·
9月前
举报
#每天一个知识点#
instanceof原理:
作用:
①用于判断某个实例是否属于某构造函数
②在继承关系中用来判断一个实例是否属于它的父类型或者祖先类型的实例
查找构造函数的原型对象是否在实例对象的原型链上,如果在返回true,如果不在返回false。
说白了,只要右边变量的 prototype 在左边变量的原型链上即可。因此,instanceof 在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype,如果查找失败,则会返回 false。
展开
技术交流圈
分享
评论
点赞
下一页
关注了
2
关注者
6
收藏集
2
关注标签
1
加入于
2019-03-08