粉丝们务必加入微信粉丝群

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub，包含一线大厂面试完整考点、资料以及我的系列文章。Markdown 是一种轻量级的标记语言，我们可以用它来格式化纯文本文档。GitHub上的每个仓库都有自己的README文件，解释了该仓库的目的。每个项目都需要好的文档。GitHub 的文档是用 Markdown 编写的。这也正是为什么需要很好地处理一些基础知识。

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。Lee Robinson 写了一篇《Why I’m Optimistic About JavaScript’s Future》 表达对 JavaScript 未来的看好。正文开始…我对JavaScript持乐观态度。开发人员希望编写 JavaScript，并希望它能在浏览器、服务器或 Edge运行。

本文涵盖了Typescript语言中的一组相对高级的主题。在实践中，您可能会发现直接使用它们并不常见；然而，这些技术被专门为Typescript设计的库大量使用：比如Prisma和tRPC。了解这些技巧可以帮助您更好地了解这些工具如何在引擎盖下工作。原文：https://dev.to/zenstack/11-tips-that-help-you-become-a-better-typescript-programmer-4ca1。

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。有时候，我们需要知道当前网络的状态来做一些事情，以提升用户体验，这节课，我们来看一下，如何使用 JavaScript 来检测用户是否在线。

CSS 样式查询是 CSS 的强大补充。我迫不及待地想看看社区中的其他人会用它们做什么。哦，我也忍不住想在 iShadeed 实验室中为样式查询创建一个新目录。敬请期待！原文：https://ishadeed.com/article/css-container-style-queries/编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

as const是 TypeScript 中的一个用于修饰符，它可以被用来修改类型推断的行为。当as const修饰符用在变量声明或表达式的类型上时，它会强制 TypeScript 将变量或表达式的类型视为不可变的（immutable）。这意味着，如果你尝试对变量或表达式进行修改，TypeScript 会报错。修饰符还可以用来修改对象字面量和数组字面量的类型推断。在这种情况下，as const会强制 TypeScript 将对象字面量或数组字面量的类型推断为不可变的，即使没有显式地指定类型。

在每个组件或HTML标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。这些钩子有：我主要是在组件上使用，当需要在组件挂载时执行一些代码，或者在更新时使用进行调试，可以确定的是所有这些钩子都能在某些情况下派上用场。例如：需要注意的是，这些钩子向回调函数传递一些参数。除了和传递两个参数，即当前的和之前的，其它只传递一个参数，即当前的。我们都知道Vue为我们提供的生命周期钩子。但你可能不知道，Vue3 同时也给了我们两个钩子，可以用于调试的？它们是：当响应式依赖的变更触发了组件渲染时会调用 注册

i < n;i++) {};}根据上面的代码，如果有10个input元素，点击任何一个都会显示。这是因为，当任何一个元素的onclick被调用时，上面的for循环已经结束，i的值已经是10了（对于所有的元素）。};};i < n;i++) {}是一个外部函数，并返回一个内部函数，这样就会形成一个闭包，num就会调用时传进来的的当时值，这样在点击元素时，就能显示正确的序号。

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。从10多年前JSON在线编辑器的早期开始，用户经常反映编辑器有时会破坏他们JSON文档中的大数字的问题。直到现在，我们也没能解决这个问题。在这篇文章中，我们深入解释了这个问题，并展示如何在JSON Editor Online中解决这个问题。

在设计一个组件时，我们需要适配不同的变化，并根据CSS类或视口大小来改变它们。这对于我们开发来说不是很理想，会迫使我们根据变化类或视口尺寸来写CSS。考虑下面例子：我们有一个卡片组件，当视口足够大时，它应该切换到水平样式。乍一看，这可能听起来不错。然而，当你更深入地思考这个问题时，它就有点复杂了。}}}如果我们不想用上面的方式，那么会出现下面这样的情况：这种从用户界面的角度来看，并不友好。通过容器查询，我们可以简单地编写响应父级或容器宽度的CSS。

数组方法在 JavaScript 中是必不可少的，数组方法有很多。对于忙碌的初学者，我选择了 10 种最常见的数组方法，你必须学习它们，这些可以帮助你提升学习效率，节省时间。为了便于理解，我为每个数组方法提供了一个示例用例。

使用 document.querySelector 和 document.querySelectorAll 在控制台中选择当前页面的元素是最常见的需求，但是有点太长了，我们可以使用 $ 和 $$ 来代替。当我们通过“元素”面板选择一个元素时，如果我们想通过 JavaScript 打印它的一些属性，比如宽度、高度、位置等，我们应该怎么做？我们看一下这个场景，我们对字符串进行了各种操作，然后我们想知道每一步的结果，我们应该怎么做呢？现在，有一个新问题，如果我们只想截取部分截图页面，我们应该做什么？

attrs对$attrs定义， Vue2 与 Vue3 是不一样的，这里我们主要来介绍 Vue3 的版本：$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。$attrs也可以被看作是一个安全网，它可以捕获任何我们没有在组件中声明的东西。{{ title }}}

这个新的指令对于要求性能极高的项目有很在帮助了，一般是在比较大型的项目中使用的，当然小型项目，大家可以根据项目需要进行食用。代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub，包含一线大厂面试完整考点、资料以及我的系列文章。我们知道，JavaScript 模块有两种方法来定义导出：默认导出和命名导出。在本节中，我们来看下为什么默认导出是一种糟糕的做法，会导致不好的开发体验。在导入使用之前，这里有一个问题，它可能会影响到我们的开发体验。为什么是默认的，而是一个命名的导出？

那么，我们能从这一切中得到什么呢？Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。作者：Fotis Adamakis 译者：前端小智 来源：mediun原文：https://fadamakis.mdium.com/validating-yur-vue-props-like-a-pro-5a2d0ed2b2d6。...

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。在真机检查一下效果：酷!

最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript，并利用 Composition API 的优势。在进行完整的 TypeScript 传递之前，Vue webpack插件使用TypeScript的 AST（抽象语法树）来推导JavaScript版本的函数选项。它们在JavaScript运行时之前被过滤掉，那么它们是如何影响组件的行为的呢?我开始尝试用最少的参数来调用这个函数，这样就不会出错，并模拟任何不重要的必要参数。..

v-model指令可以在表单输入元素上实现双向数据绑定，比如input元素、textarea元素和select元素等等。它以两种方式处理数据更新:当输入的值发生变化时，v-model会将该值反映到组件内部的状态当组件的状态发生变化时，v-model会将变化反映到表单输入元素上默认情况下，v-modelinput和textarea对应value属性和input事件checkboxes和radio对应checked属性和change事件select对应value属性和change事件。...

自从尤大的构建工具Vite获得了巨大的人气，现在有了一个由它驱动的极快的单元测试框架。Vitest。Vitest 与 Jest 兼容，具有开箱即用的 ESM、Typescript 和 JSX 支持，并且由esbuild提供支持。它在测试过程中使用 Vite 开发服务器来转换你的文件，并监听你的应用程序的相同配置（通过），从而消除了使用Jest等测试替代品所涉及的重复工作。使用 Vitest 对我们的应用程序进行单元测试是无缝的，与Jest等替代品相比，需要更少的步骤来启动和运行。...

import map提供了一种更理智的方式来在浏览器中使用ES模块，而不局限于从相对或绝对的URL中导入。这使得我们可以很容易地移动代码，而不需要调整 import语句，并使个别模块的更新更加无缝，而不影响依赖这些模块的脚本的缓存能力。总的来说，import map为ES模块在服务器和浏览器中的使用方式带来了平等性。代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。...

爆米花的加载状态是非常明显的，会伤害用户体验。幸运的是，Suspense是一个很棒的新特性，它为我们在Vue应用程序中协调加载状态提供了很多选择。然而，在写这篇文章的时候，Suspense仍然被认为是实验性的，所以要谨慎行事。关于它的状态的最新信息，请参考文档。编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。作者MichaelThiessen译者小智来源vueschool原文。......

当一个对象的属性键是上述类型的组合时，该对象的非负整数键（可枚举和不可枚举）首先按升序添加到数组中，然后按插入顺序添加字符串键。最后，Symbol键按插入顺序加入。100100,00,a'a','a',};',key);}但是，如果你强烈依赖插入顺序，那么Map可以保证这一点。编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。作者islizeqiang译者小智来源。...

当一个对象的属性键是上述类型的组合时，该对象的非负整数键（可枚举和不可枚举）首先按升序添加到数组中，然后按插入顺序添加字符串键。最后，Symbol键按插入顺序加入。100100,00,a'a','a',};',key);}但是，如果你强烈依赖插入顺序，那么Map可以保证这一点。编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。作者islizeqiang译者小智来源。...

文本是翻译的，作者Fotis Adamakis， 他是 Vue.js雅典会议的共同组织者，文中的第一人称指的是该大佬。从最初引入Vue 3开始，已经过去了4年多。经过多次RFC的讨论，以及其他现代框架（包括React和Svelte）的影响，Vue 可能已经成为最强大和最全面的框架，能够逐步支持任何规模和架构的应用。听起来很刺激，对吗？嗯，事实远非如此。从那时起，就发生了很多延迟和降级的情况。尽管Vue 3最近成为了新的默认版本，但很多重要的支持库还没有准备好，甚至没有计划与两个版本兼容。这说明很多代码库还

你的可能已经注意到，VUE 3版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变化，而且迁移过程也非常直接。然而，一个非常不明显但重要的变化常常被忽视，它可能导致难以调试的行为。现在所有的导航都是异步的。如果你想知道为什么 URL中的查询参数在你的 方法或 钩子中无处可寻，但当插入它们时，它们仍然出现在模板中，不要离开， 我们来一探究竟。为了探索这一点，我们将使用一个已经安装了Vue router 4

你的可能已经注意到，VUE 3版本的 Vue router (4.0) 与其之前的版本有一些 breaking change 更改。大部分的 Vue Router API 都没有变化，而且迁移过程也非常直接。然而，一个非常不明显但重要的变化常常被忽视，它可能导致难以调试的行为。现在所有的导航都是异步的。如果你想知道为什么 URL中的查询参数在你的 方法或 钩子中无处可寻，但当插入它们时，它们仍然出现在模板中，不要离开， 我们来一探究竟。为了探索这一点，我们将使用一个已经安装了Vue router 4

作者：fatfish译者：前端小智来源：medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。前言最近，我被问到几个奇怪的面试问题。它们与普通的问题不同：这些面试问题看起来非常简单，但却考验你对JavaScript的透彻理解。你能正确回答多少个？x !== x 可以为 true ?请问当 x 值为什么时.

作者：knaagar译者：前端小智来源：dev有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。渐变文字h1{ background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d); background-clip: text; -.

作者：Ahmad Shadeed译者：前端小智来源：dev有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。首先，问大家一个问题，你对 JS 的熟练程度有多深？今天，我们来介绍一下 JS 中的33个概念，这些概念中，你可能知道，也有可能不知道，甚至连听都没听过。这些概念是作为前端都应该需要知道的，那我们开始吧。.

作者：Sang Nguyen译者：前端小智来源：medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。Vue 是我使用的第一个 JS 框架。可以说，Vue 是我进入JavaScript世界的第一道门之一。目前，Vue 仍然是一个很棒的框架。随着 composition API 的出现，Vue 只会有更大的.

作者：lindelof译者：前端小智来源:medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。在本文中，我们将探讨一些最常见的vue js组件。你可以收藏一波。Table 类Vue Tables-2地址：https://github.com/matfish2/vue-tables-2Vue Tab.

作者：Matt Maribojoc译者：前端小智来源：stackabusevue3 源码实战出来啦：在面试中，害怕被问到 Vue源码，或者想通过自己对Vue 源码的来秀一下面试官的，可以了解一下。修改 placeholder 样式，多行文本溢出，隐藏滚动条，修改光标颜色，水平和垂直居中。这些熟悉的场景啊! 前端开发者几乎每天都会和它们打交道，这里有20个CSS技巧，让我们一起来看看吧。1. 解决 img 5px 间距的问题你是否经常遇到图片底部多出5px间距的问题？不用急，这里有4种方法可以.

作者： 神Q超人译者：前端小智来源：medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。由于 JavaScript 本身是弱语言，因此在开发上常因为不知道变量的类型是什么而感到苦恼，即使借由命名的方式让变量的定位稍微明确一点，我们还是很难一眼就知道他的类型甚至当此变量是一个 object 时我们更难知道里面.

作者：Shadeed译者：前端小智来源：medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。一个成功的Web App必须有良好的用户体验。当我们谈及改善用户体验时，你会想到什么？其实，有一点是很容易被开发者忽视的，那就是CSS。我们可以使用一些CSS技巧来改善网页的表现形式、交互细节和可访问性。而且这些.

作者： John Lim译者：前端小智来源：vuemastery有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。本文列举了用于Vue 2和Vue.

作者： Jose Granja译者：前端小智来源：medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少.

作者：Ravidu Perera译者：前端小智来源：medium有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。Promise 提供了一种优雅的方法来处理 JS 中的异步操作。这也是避免“回调地狱”的解决方案。然而，并没有多少开发人员了解其中的内容。因此，许多人在实践中往往会犯错误。在本文中，介绍一下使用 pro.

作者：Ruphaa译者：前端小智来源：dev有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。在本文串，你将学到所有你需要知道的 JS 解构知识点。为什么 JS 中存在解构？这是一个普通的对象，包含4个人的名字。const names = { taylor: '小智', shawn: '前端小智.