自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

-+

上一步保存

xyphf的博客

不断学习，追求卓越

09月 08月 07月 06月 05月 04月 03月

原创网页刷新后Vuex后数据丢失处理问题

网页刷新后Vuex数据丢失或者恢复了默认值，我们可以通过localStorage来组合使用。在store文件夹的index文件里面1、首先我们在改变Vuex里面值的时候，在localStorage也存一份，在使用Vuex取值的时候优先在localStorage里面取值。2、但是某些浏览器可能不支持localStorage，所以要try catch一下，有一点要特别注意的是，try ca...

2019-08-25 07:34:01 364

转载 html5将文字生成图片

本文链接：https://blog.csdn.net/qq_30100043/article/details/76549377由于canvas能够将画布上的纹理生成数据给img显示出来，所以，我们在html5里面可以实现将文字生成图片显示。首先我书写了一个将文字绘制到canvas上面的函数，然后函数会返回canvas绘制的纹理数据。//绘制文字到canvas，判断换行位置，和设置c...

2019-08-15 21:28:11 1642

原创 vue-svg-icon报错

$ npm install vue-svg-icon --save-dev跑起来后报错This dependency was not found: * !xml-loader!../../src/svg in ./~/.6.4.1@babel-loader/lib!./~/.11.1.4@vue-loader/lib/selector.js?type=script&amp...

2019-08-15 21:25:16 1405 1

原创 Element-UI Methods 如何调用

现在用Element-UI做上传文件的功能，需要调用clearFiles方法，但尝试了几次不行？查了好久终于明白了1、先在el-upload加个ref="xx"；2、然后把这个写在对应的事件方法里面， this.$refs.xx.clearFiles()...

2019-08-15 21:20:51 8300 1

原创 elementUI表格无数据显示图片

<el-table :data="tableData" border empty-text="当前数据没有，请添加数...

2019-08-15 21:17:49 4602

WebGL/ThreeJS 相机控件OrbitControls.js和性能控件/stats.min.js 使用案例

WebGL/ThreeJS 相机控件OrbitControls.js和性能控件/stats.min.js 使用案例

2021-11-29

ThreeJs的旋转缩放平移控件和性能监控控件

ThreeJs的旋转缩放平移控件OrbitControls和性能监控控件stats.min.js

2021-11-29

WebGL/ThreeJS项目初始化Demo

WebGL/ThreeJS项目初始化Demo

2021-11-29

ThreeJS创建纹理贴图demo.zip

WebGL/ThreeJS创建纹理贴图demo

2021-11-29

WebGL/ThreeJS 网格几何体(WireframeGeometry)demo

WebGL/ThreeJS 网格几何体(WireframeGeometry)demo

2021-11-29

WebGL/ThreeJS EdgesGeometry边缘几何体画一个立方体的边框demo

WebGL/ThreeJS EdgesGeometry边缘几何体画一个立方体的边框

2021-11-29

WebGL/ThreeJS项目初始化案例

WebGL/ThreeJS项目初始化案例Demo

2021-11-29

WebGL/ThreeJS灯光demo.zip

WebGL/ThreeJS灯光使用Demo

2021-11-28

正投影和透视投影相机对比demo.zip

WebGL/ThreeJS正投影和透视投影相机对比demo

2021-11-28

WebGL/ThreeJS材质覆盖小demo.zip

WebGL/ThreeJS材质覆盖小demo

2021-11-28

WebGL/ThreeJS场景雾化demo.zip

WebGL/Three场景雾化简易demo

2021-11-28

WebGL/ThreeJS入门简易demo之立方体.zip

WebGL/ThreeJS入门简易Demo画一个立方体

2021-11-28

LQ-1600K_XP.rar

爱普生 630K730K税控票据增值税发票送货单发货单清单针式打印机驱动

2021-11-23

ngxin1.12.0安装.zip

linux下ngxin1.12.0安装

2021-08-23

webserver10.zip

端对端1V1传输基本流程十、第五节获取 offer/answer 创建的 SDP https://blog.csdn.net/xyphf/article/details/107745274

2020-08-02

webserver10.zip

WebRTC端对端1V1传输基本流程本机内的一对一音视频互通 https://blog.csdn.net/xyphf/article/details/107743111

2020-08-02

chatroom.zip

WebRTC信令服务器实现- WebRTC信令服务器的实现 https://blog.csdn.net/xyphf/article/details/107292309

2020-07-11

webrtctest7.zip

WebRTC采集屏幕数据录屏功能 https://blog.csdn.net/xyphf/article/details/107240467

2020-07-09

webrtctest7.zip

WebRTC音视频录制实战录制音视频实战 https://blog.csdn.net/xyphf/article/details/107238200

2020-07-09

webrtctest6.zip

WebRTC音视频数据采集 MediaStreamAPI及获取视频约束 https://blog.csdn.net/xyphf/article/details/107131986

2020-07-04

redis-x64-5.0.14.1

GitHub同源，就是下载太慢了，这里下载快一点， Redis-x64-5.0.14.1.zip，Redis-x64-5.0.14.1.msi，redis-5.0.14.1.zip，redis-5.0.14.1.tar.gz四个包都有

2024-01-02

Vite配置要点梳理源文件

Vite构建工具配置要点梳理源文件

2023-11-06

VUE3知识体系思维导图全面总结梳理

VUE3知识体系思维导图全面总结

2023-11-03

vue-devtools安装包

vue-devtools安装包，可以解压直接使用，支持vue3

2022-06-04

数字跑动效果的实现DEMO

数字滚动效果的实现

2022-06-01

Three.js的物体点击选中拾取DEMO

Three.js的物体点击选中拾取DEMO

2022-05-23

threejs常见灯光及阴影的使用

threeJS环境光(AmbientLight)点光源(PointLight)聚光灯(SpotLight)平行光(DirectinalLight)及阴影的使用

2022-05-19

threeJs透视相机PerspectiveCamera DEMO

threeJs透视相机PerspectiveCamera DEMO

2022-05-19

three.js正投影相机OrthographicCamera使用DEMO

three.js正投影相机OrthographicCamera使用DEMO，threeJS正交投影全屏和部分展示DEMO

2022-05-19

ThreeJS思维导图源文件.xmind

ThreeJS思维导图源文件

2022-01-07

ThreeJS渲染尺寸非浏览器窗体尺寸时选中会有问题方案解决DEMO.zip

ThreeJS渲染尺寸非浏览器窗体尺寸时选中会有问题方案解决DEMO

2022-01-06

WebGL/ThreeJS后期处理Demo

WebGL/ThreeJS后期处理

2021-12-13

ThreeJS创建天空盒的几种方法

ThreeJS创建天空盒的几种方法

2021-12-10

tweenjs动画库配合ThreeJS使用DEMO

tweenjs动画库配合ThreeJS使用DEMO

2021-12-09

ThreeJS使用Curve曲线让物体沿轨迹运动DEMO

ThreeJS使用Curve曲线让物体沿轨迹运动DEMO

2021-12-09

ThreeJS导出三维模型、导入三维模型、导入三维动画DEMO

ThreeJS导出三维模型、导入三维模型、导入三维动画

2021-12-07

WebGL/ThreeJS Sprite、SpriteMaterial通过精灵模型和Canvas画布Demo

WebGL/ThreeJS Sprite、SpriteMaterial通过精灵模型和Canvas画布Demo

2021-12-01

WebGL/ThreeJS场景中创建立体文字TextGeometry

WebGL/ThreeJS场景中创建立体文字TextGeometry

2021-11-30

WebGL/ThreeJS创建立体文字TextGeometry

WebGL/ThreeJS创建立体文字TextGeometry

2021-11-30

ThreeBSP库进行实现差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)Demo

ThreeBSP库进行实现差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)

2021-11-29

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

xyphf_和派孔明 CSDN认证博客专家 CSDN认证企业博客

码龄9年

IP 属地：江苏省

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）

712: 原创

2万+: 周排名

2万+: 总排名

227万+: 访问

: 等级

2万+: 积分

1180: 粉丝

1061: 获赞

362: 评论

3348: 收藏

私信

关注

热门文章

分类专栏

最新评论

VUE2和VUE3思维导图知识体系总结大对比
li_zhi_an: 这个vue2的可以下载吗
WebGL/threeJS面试题扫描与总结
flower_water_: 这么细节，恩师！！!
论小程序canvas载入图片安卓机不显示drawImage无效怎么办？
弥森: 请接受我的膝盖，靠北这个BUG困扰了我4天了，试过所有的方法，谁能想到是设置透明色的问题，谢谢你！
事件队列事件循环(EventLoop) 宏任务微任务详解面试题
xyphf_和派孔明: vue nextTick原理 Vue.js 的 nextTick 方法巧妙地利用了 JavaScript 的事件循环机制和异步任务调度机制，以确保在组件 DOM 更新完毕后再执行传入的回调函数。下面是详细的原理说明： 1.事件循环 (Event Loop)： JavaScript 运行环境（浏览器或Node.js）采用单线程模型，并通过事件循环机制处理异步任务。事件循环包含多个阶段，其中有两个关键阶段涉及异步任务： - 宏任务 (Macro Task)：包括 setTimeout, setInterval, requestAnimationFrame, I/O 操作完成后的回调函数等。 - 微任务 (Micro Task)：包括 Promise 回调、MutationObserver 观察、process.nextTick（Node.js 环境）等。 2.Vue 异步更新队列： Vue.js 使用异步更新队列来优化性能。当数据发生变化时，Vue 不会立刻重新渲染整个视图，而是把视图更新任务放在一个异步队列中。这样可以让多个数据更改合并成一次视图更新，避免频繁无谓的DOM操作。 3.nextTick 的工作原理：当你需要在一个数据变化后立即访问更新后的 DOM 时，Vue 提供了 nextTick 方法。该方法内部会把用户的回调函数插入到异步任务队列中，通常会优先选择微任务队列。 - 如果环境支持，Vue 将优先使用 Promise（通过 Promise.resolve().then(callback)）或者更高效的类似微任务API（如 MutationObserver 或者 queueMicrotask）来安排回调。 - 若上述API不可用，则可能回退至使用 setTimeout(callback, 0)，这会将回调安排在下一个宏任务中执行。无论是微任务还是宏任务，最终目标都是确保在当前任务队列（包括同步任务和之前的微任务）全部执行完毕后，DOM 已经完成更新，然后才执行用户提供的回调函数。因此，nextTick 有效地利用了 JavaScript 事件循环的特性，使得开发者可以在恰当的时间点获取到更新后的 DOM 结构。这一机制尤其对于那些依赖于新状态下的 DOM 结构的操作非常重要。
事件队列事件循环(EventLoop) 宏任务微任务详解面试题
xyphf_和派孔明: Vue.js 中的 nextTick 方法允许开发者在下次 DOM 更新循环结束之后执行延迟回调。在 Vue 的异步更新队列机制中，数据改变并不会立即触发视图更新，而是将这些变更放入一个队列中，等待同步任务完成后，在下一个事件循环 tick 时再去更新 DOM。 Vue 2.x 版本中，nextTick 的底层实现主要依赖于以下几个策略： 1.Promise：在支持 Promise 的环境下，Vue 会使用原生的 Promise 实现 nextTick，即 Promise.resolve()。 2.MutationObserver：在现代浏览器中，Vue 会使用 MutationObserver 监听 DOM 变化，这是一种可以在 DOM 树变化时得到通知的 API。 3.setImmediate 和 MessageChannel：在一些特定的环境中，如 Internet Explorer 10 及以上版本或 Node.js 环境中，Vue 会尝试使用 setImmediate 或 MessageChannel API。 4.setTimeout(fn, 0)：作为兼容性兜底方案，Vue 最终会回退到使用 setTimeout(fn, 0)，尽管这种方式并不精确，但它能够在所有环境下保证异步执行。 Vue 3.x 版本中，由于使用了新的响应式系统（Composition API），nextTick 的实现细节有所改变，但基本思路仍然是利用微任务来在DOM更新后执行回调。Vue 3.x 中主要采用 queueJob 函数调度异步更新任务，这个函数会根据环境选择合适的异步任务调度器，例如优先使用 Promise.then 或者其他的微任务 API。总结来说，Vue 的 nextTick 提供了一种可靠的在 DOM 更新后执行操作的方法，其底层原理是利用了JavaScript 事件循环和异步任务调度机制来确保回调函数在正确的时间点被执行。

最新文章

提示

确定要删除当前文章？

取消删除