weixin_46328739的博客

宏任务是 JavaScript 中的最外层任务，它包括了浏览器中几乎所有的常见操作，如setTimeout 和 setInterval 中的回调函数DOM 渲染网络请求的回调（如 AJAX）用户输入（键盘事件、鼠标事件等）每当 JavaScript 引擎执行一个宏任务时，它会按照以下步骤进行从宏任务队列中取出第一个任务。执行这个任务，直到它完成。然后开始下一个宏任务。

在 JavaScript 中，Promise 是用于处理异步操作的一种方式。它代表了一个 可能 在将来某个时间点完成或失败的操作的结果。Promise 使得我们能够优雅地处理异步代码，避免了回调地狱（Callback Hell）的问题，提升了代码的可读性和可维护性。Promise 的基本状态初始状态，表示异步操作还未完成。表示异步操作已成功完成表示异步操作失败。

JavaScript 中的函数作用域遵循词法作用域规则，变量的查找顺序是从当前函数的作用域开始，依次向外查找，直到全局作用域为止。即使在一个函数内部声明了与全局变量同名的局部变量，这个局部变量仅对函数内部有效。函数外部的同名变量（如果有）不会被覆盖。使用 var 声明的变量在其作用域内有效，如果函数内有同名变量，局部变量会覆盖函数内部的代码，但不会影响外部作用域中的变量。

this.age++ 在此时尝试访问 window.age，如果 age 在全局对象上未定义，它会被初始化为 undefined,然后，undefined++ 结果是 NaN，因为 undefined 不能进行加法操作，JavaScript 会将其转为 NaN。注意，growup() 是一个普通函数，而不是作为对象方法调用的，因此它的 this 指向是一个重要的焦点。我们调用了 obj 对象的 growup 方法，this 在方法调用时指向该对象 obj this 指向 obj。使用 bind() 方法。

使用纯CSS和JavaScript来实现一个转盘抽奖效果。我们可以设定每个奖项的概率，并使用加权随机算法来决定最终的中奖奖项。

使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同。

前提条件：组件创建完成。

【代码】vue3 学习笔记17 -- echarts的使用。

【代码】vue3 学习笔记16 -- elementPlus的使用。

当我们在项目中需要对 DOM 进行直接操作或者监听事件时，自定义指令（Custom Directives）是一个强大的工具。它允许我们在 Vue 组件中声明式地绑定指令，从而实现各种交互行为和视觉效果。本文将介绍如何创建和使用自定义指令在 Vue 中，指令是带有 v- 前缀的特殊属性，用于对 DOM 进行直接操作或者添加特定行为。自定义指令允许我们封装对 DOM 的操作逻辑，并在多个组件中重复使用，从而提高代码的可维护性和复用性。在项目中创建一个文件夹来存放自定义指令，比如 directives。

onMounted(): 在组件挂载后调用，此时组件已经被添加到页面中，可以执行 DOM 操作或异步请求等操作。onBeforeMount(): 在组件挂载之前调用，此时虚拟 DOM 已经准备好，但尚未渲染到页面上。onBeforeUpdate(): 在组件更新之前调用，可以用于准备更新前的数据状态。onUpdated(): 在组件更新完成后调用，可以执行一些 DOM 操作。onUnmounted(): 在组件卸载后调用，执行一些清理工作。节流函数用于减少函数的调用频率，确保在一定时间内只执行一次。

插槽（Slots）是一种让父组件能够向子组件传递标记的方法。通过定义插槽，子组件可以预留出可由父组件控制的区域，这样父组件就可以向这些区域填充自己的内容。具名插槽允许父组件在子组件中定义多个插槽位置，使得父组件可以将不同的内容分发到不同的插槽中。这种方式特别适合需要布局或者结构化控制的场景。默认插槽是最基本的插槽形式，允许父组件在子组件中插入任意内容，而子组件则可以通过 来渲染这些内容。子组件向父组件传递数据的一种形式，子组件在具名标签或者匿名标签上绑定数据，父组件在标签上获取数据。

下述代码中，message的内容将在页面上显示一次，5秒钟后改变，但页面上的内容不会更新，仍然显示为"Hello, once!这是因为v-once已经在第一次渲染时将内容"Hello, once!"和数据绑定一起存储起来，后续即使数据变化，也不会更新DOM。{{ this will not be compiled }} 会被当作静态文本显示在页面上，而不是由 Vue 进行处理。以 v- 开头的特殊属性，如 v-if, v-for, v-bind, v-on。

在子组件中使用 defineProps 来定义接收的属性

postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位，从而实现响应式布局。主要用途是在移动端开发中，通过设置根元素的字体大小，使得页面元素的尺寸随着根元素字体大小的变化而变化，从而实现不同屏幕尺寸下的自适应布局。

computed 是 Vue 3 中用于创建计算属性的重要 API，它能够根据其它响应式数据动态计算出一个新的值，并确保在依赖数据变化时自动更新。这样可以确保在性能上的优化，避免不必要的计算。watch终止监听，只需要将watch赋值给一个变量，当达到条件调用watch赋值的那个变量就可以终止监听了。squaredCount 是一个计算属性，它依赖于 count 的值，并且会在 count 变化时自动更新。在 Vue 组件中，可以将计算属性直接用于模板中，而不需要额外的 .value 访问方式。

定义响应式数据主要通过 Vue 3 提供的 reactive、ref 和 computed 这几个 API 来实现ref：用于定义基本类型的响应式数据,如数字、字符串、布尔值等。它返回一个包含响应式数据的对象，通过 .value 访问或修改数据// 读取响应式数据// 更改响应式数据在模板中，直接使用 count 而不需要使用 .value 来访问数据。reactive:用于定义一个对象，并使该对象内部所有属性变成响应式的。

使用 Pinia 的步骤可以分为安装和配置 Pinia、创建和封装 store 以及在组件中使用 store。

创建一个 Axios 实例并封装成一个可复用的模块，这样可以在整个应用中轻松地进行 API 请求管理。

在src/styles下新建通用scss文件。项目中结合 SCSS 可以很方便地管理样式。在main.ts中引入。