weixin_63215361的博客

原创 JavaScript——6.全局对象

以后在公司里开发，我们可能一人负责一个JS,在一个JS里面我们把所有代码封装到一个立即函数中，把我们需要暴露的东西使用返回即可，如果想暴露多个东西，可以采用返回对象。所有的全局变量、全局函数都会附加到全局对象，这称之为全局污染，又称之为全局暴露，或简称污染、暴露。给未声明的变量赋值，实际就是给全局对象的属性赋值【即window的属性】 ，永远别这么干。// 使用 1.js 暴露的函数和变量。var a = 1;var b = 2;var b = 4;// 暴露为：sayHi。// 暴露为：count。

原创 JavaScript——3. 函数流程切割

设计函数就是如何切割流程，具体来说就是设计出函数的三要素，这一步是最难的，目前无须同学们掌握，老师会帮你把函数设计好。如果在函数的帮助下，反而觉得流程变得复杂了，极有可能的原因是开发思想没有做相应的切割，导致思想负担过重。使用函数切割流程，不仅可以减少重复代码、还可以有效的降低整体复杂度。只要具备三要素，就能书写函数体；根据设计的三要素完成函数体，这一步就是现阶段练习的重点。注意：return 是结束函数，break是结束循环。函数的核心作用，是为了让某一段复杂的流程变得简单。函数体：表示具体的流程。

原创 JavaScript——2. 数据运算

小贴士在实际的开发中，我们可以利用短路规则简化代码。

原创 JavaScript——1. 数据的表达式

在 JavaScript 中，对象的键（属性名）如果是合法标识符（identifier） ，则在 console.log 输出时不会被加上引号。书写代码时我们无须关注这些规则，直接按照简写方式书写属性，若编辑器出现报错，则使用引号包裹属性名即可。一个完整的程序中，会涉及成百上千的标识符，好的名称不仅可以减少名称冲突，更有利于程序的阅读和维护。程序中任何需要数据的地方，都可以使用上面任意一种数据表达。，和其他命令式编程语言一样，它的本质是。，把要读取的属性名传递到中括号中，为了书写的方便，当对象的属性名是。

原创 JavaScript——闭包特性与作用

闭包(Closure)是JavaScript中一个强大而独特的特性，指的是函数及其捆绑的周边环境状态的引用的组合。简单来说，闭包就是一个函数能够访问并操作其定义时所在的词法作用域，即使该函数在其定义的作用域之外执行。核心概念词法作用域：函数在定义时确定的作用域，而非执行时作用域链：函数可以访问其自身作用域、外层函数作用域和全局作用域中的变量状态保存：闭包能够"记住"其定义时的环境，即使外部函数已经执行完毕生活比喻。

原创 JavaScript——Reflect

Reflect是ES6引入的一个内置对象，它提供了一组静态方法，用于执行那些通常是JavaScript语言内部的对象操作。Reflect的方法与Proxy handlers的方法一一对应，允许开发者以函数式的方式操作对象。核心特点是一个内置对象，不是构造函数，不能使用new操作符所有方法都是静态方法，类似于Math对象方法与Proxy handlers的方法一一对应提供了更合理的返回值和错误处理方式以函数式方式操作对象，替代了部分Object方法和操作符方法作用。

原创 JavaScript——集合： Map与WeakMap

Map是ES6引入的一种新的集合类型，用于存储键值对(key-value)集合。与传统对象(Object)类似，但具有更强大的功能和灵活性。Map vs Object的主要区别特性MapObject键类型可以是任意类型（字符串、数字、对象、函数等）主要是字符串或Symbol键顺序保留插入顺序ES6之前不保证顺序，ES6之后为插入顺序大小获取直接通过size属性需要手动计算（Object.keys(obj).length）迭代方式可直接迭代。

原创 Vue3 ——Teleport传送API

Teleport（传送门）是Vue3提供的一个内置组件，用于将组件的模板内容渲染到DOM中的指定位置，而不受组件在组件树中的层级限制。核心特点渲染位置与逻辑分离：组件的逻辑仍属于当前组件，但内容渲染到指定DOM节点突破样式限制：避免父组件的z-index等样式限制保持组件关系：虽然内容被传送，但仍能访问父组件的props和方法，参与组件通信简化CSS：无需使用复杂的CSS定位来突破父组件限制解决的问题被父组件的裁剪难以设置正确的z-index层级复杂的定位样式。

原创 Vue3——响应式数据判断

Vue3的响应式系统是其核心特性之一，基于ES6的ProxyAPI实现，相比Vue2的具有更强大的功能和更好的性能。核心特点代理而非劫持：通过Proxy代理整个对象，而非劫持单个属性深层响应式：默认递归转换对象的所有嵌套属性多种响应式类型：支持普通响应式、只读响应式、浅层响应式等显式判断API：提供了一系列函数用于判断数据的响应式类型主要响应式APIref()：创建基本类型的响应式数据reactive()：创建对象类型的响应式数据readonly()：创建只读的响应式数据。

原创 Vue3——provide与inject组件通信

provide和inject是Vue3提供的一种跨层级组件通信方式，用于祖先组件向其所有子孙组件注入依赖，而无需通过props在每一层级手动传递。核心特点跨层级通信：可以跳过中间组件，直接在祖先和后代组件间通信简化深层传递：解决了props需要逐层传递的"props drilling"问题灵活注入：后代组件可以选择性注入需要的数据或方法非响应式默认：默认情况下传递的数据是非响应式的，需特殊处理实现响应式使用场景深层级组件间的数据共享（如主题、语言、用户信息等）组件库开发中的上下文传递。

原创 Vue2——父组件给子组件传值

props是Vue组件通信中最基础的方式之一，用于父组件向子组件传递数据。props是子组件上的自定义属性，父组件可以通过这些属性向子组件传递数据。核心特点单向数据流：数据只能从父组件流向子组件，子组件不能直接修改props可预测性：明确声明需要接收的数据，使组件接口清晰验证机制：可以指定数据类型、默认值和验证规则灵活性：支持多种数据类型，包括基本类型、对象、数组和函数使用流程父组件在引用子组件时，通过属性传递数据子组件在props选项中声明接收的数据。

原创 JavaScript——闭包特性与作用

闭包(Closure)是JavaScript中一个强大而独特的特性，指的是函数及其捆绑的周边环境状态的引用的组合。简单来说，闭包就是一个函数能够访问并操作其定义时所在的词法作用域，即使该函数在其定义的作用域之外执行。核心概念词法作用域：函数在定义时确定的作用域，而非执行时作用域链：函数可以访问其自身作用域、外层函数作用域和全局作用域中的变量状态保存：闭包能够"记住"其定义时的环境，即使外部函数已经执行完毕生活比喻。

原创 VUE3 ——customRef特性与作用

customRef是Vue3提供的一个高级响应式API，用于创建自定义行为的ref对象。它允许开发者自定义ref的 getter 和 setter 逻辑，从而实现特殊的响应式需求。核心特性自定义响应式行为：可以控制数据读取和修改的逻辑完全控制依赖追踪：手动决定何时触发依赖收集和更新通知灵活性高：可实现防抖、节流、延迟更新等高级功能与普通ref兼容：创建的对象可以像普通ref一样使用工作原理customRef接收一个工厂函数作为参数，该函数返回一个包含get和setget()

原创 Vue2源码解析——6. Vue响应式系统变化侦测机制大总结

变化侦测是Vue响应式系统的基础，其核心目标是自动侦测数据变化并发出通知，实现数据与视图的自动同步。Vue2通过实现对数据的监听，当数据被读取时收集依赖，当数据被修改时通知依赖更新。Vue2响应式系统基于Observer：将数据对象转为响应式，递归处理所有子属性Dep：管理依赖关系，作为数据与Watcher的中介Watcher：订阅数据变化，执行更新操作数据初始化时，Observer将其转为响应式Watcher读取数据时，触发getter完成依赖收集。

原创 Vue2源码解析——5. Vue响应式系统：Object.defineProperty的局限与vm.$set/vm.$delete

核心问题Object.defineProperty无法检测对象属性的添加和删除原因是getter/setter只在初始化时为已有属性绑定解决方案: 添加响应式属性: 删除响应式属性并触发更新工作原理为新属性添加getter/setter通过对象的通知依赖更新最佳实践初始化时声明所有属性优先使用数组方法而非直接修改索引复杂场景考虑使用对象展开运算符创建新对象理解这些机制不仅能帮助你解决实际开发中的响应式问题，还能深入掌握Vue响应式系统的设计思想和实现细节。

原创 Vue3 ——toRef特性与作用

toRef是Vue3提供的一个响应式工具API，用于将响应式对象的单个属性转换为独立的ref对象。这个ref对象与源对象的属性保持双向绑定关系：修改ref的值会同步更新源对象，修改源对象的属性也会同步更新ref的值。核心特性保持与源对象属性的响应式连接创建的ref对象是可修改的（即使源对象是readonly）不会触发源对象的getter（懒计算特性）当源对象属性不存在时，返回一个默认值为undefined的ref适用场景组件 props 透传：将 props 的单个属性转换为 ref。

原创 Vue2 ——2. 创建实例

methods选项用于定义实例的方法，这些方法可以通过this访问实例的数据和其他方法。< div id = " app " > < p > 计数: {{ count }} </ p > < button @click = " increment " > 增加 </ button > < button @click = " decrement " > 减少 </ button > </ div > < script > new Vue({return {

原创 Vue2——1. 安装教程

CDN（内容分发网络）引入是最简单的使用Vue的方式，无需安装任何开发工具，直接在HTML文件中引入Vue.js文件即可。NPM是Node.js的包管理器，通过NPM安装Vue可以更好地管理项目依赖，适合中大型项目开发。Vue CLI是官方提供的脚手架工具，可以快速搭建Vue项目，内置了webpack、Babel等工具，适合大型项目开发。安装方式难度适用场景特点CDN引入简单学习、小型项目、原型开发无需构建工具，直接使用NPM安装中等中大型项目开发需手动配置构建工具，灵活度高。

原创 Vue3—— toRaw与markRaw

toRaw和markRaw。它们允许开发者直接与响应式系统底层交互，提供了更高的灵活性和性能优化能力。核心功能toRaw：获取响应式对象的原始对象（解除响应式包装）markRaw：标记对象，使其永远不会被转换为响应式对象应用场景性能优化：避免对大型对象进行响应式转换的开销与第三方库集成：保持与非Vue库的兼容性临时读取：读取响应式对象而不触发依赖追踪不可变数据：创建不会被Vue响应式系统处理的数据注意事项这两个API属于高级特性，通常用于性能优化和特殊场景。

原创 Vue3—— readonly与shallowReadonly

readonly和。它们用于创建不可修改的响应式对象，任何对这些对象的修改操作都会被阻止（在开发环境下会触发警告），但对象仍然保持响应式特性——当原始响应式对象变化时，只读对象也会同步更新。核心特点禁止修改对象本身及其属性（开发环境有警告）仍然保持响应式（原始数据变化时，只读对象会同步更新）readonly递归应用只读，只应用于顶层属性常用于提供不可变的数据访问，如全局配置、状态快照等适用场景保护核心配置数据不被修改创建状态的只读副本，用于展示组件间共享只读数据。

原创 Vue3 ——shallowReactive与shallowRef

和shallowRef。与默认的reactive和ref不同，浅层响应式API只对数据的顶层属性创建响应式，不会递归地将嵌套对象转换为响应式对象。核心特点仅处理对象的顶层属性，不处理嵌套对象创建和访问速度比深层响应式更快（性能优势）内存占用更少，适合大型对象操作嵌套对象不会触发响应式更新适用场景大型数据结构，只需要响应顶层属性变化已知不会修改的嵌套对象性能优化场景，避免不必要的响应式转换与第三方库集成时，避免深度响应式干扰用于对象/数组类型只对顶层属性创建响应式。

原创 Vue2源码解析——4. 响应式原理核心代码解析

Vue2的响应式系统核心是通过Observer类和函数，使用重定义对象属性的getter和setter，实现依赖收集和派发更新。将数据转换为响应式：通过Observer遍历对象属性，调用defineReactive依赖收集：在getter中收集使用该属性的依赖（Watcher）派发更新：在setter中通知所有依赖进行更新虽然这种实现存在一些局限性，但理解它对于掌握Vue的响应式原理至关重要。Vue3使用Proxy API重写了响应式系统，解决了这些局限性，同时保持了相似的核心思想。

原创 vue3——自定义Hook

一、自定义Hook基础概念1.1 什么是自定义Hook？1.2 第一个自定义Hook：useCounter二、自定义Hook进阶应用2.1 带选项的自定义Hook：useLocalStorage2.2 异步数据获取Hook：useFetch三、组合多个Hook的高级应用3.1 组合Hook示例：useUserData四、自定义Hook最佳实践4.1 命名规范4.2 代码组织4.3 状态管理4.4 错误处理4.5 文档和测试4.6 性能优化五、常见自定义Hook示例。

原创 Vue3——获取DOM和nextTick详解

在Vue中，通常推荐使用数据驱动的方式更新视图，而非直接操作DOM。但在某些场景下（如集成第三方库、复杂动画等），我们仍需要直接访问DOM元素。Vue3提供了简洁的API来安全地获取和操作DOM，同时通过nextTick确保在DOM更新后执行操作。nextTick是Vue提供的一个全局API，用于在DOM更新完成后执行回调函数。当你修改了响应式数据后，Vue不会立即更新DOM，而是将DOM更新操作放入一个队列中，等到下一个事件循环时统一执行。nextTick。

原创 vue3——生命周期概述

Vue3的生命周期是指组件从创建到销毁的整个过程，期间会触发一系列钩子函数，允许我们在特定阶段执行代码。理解生命周期有助于更好地控制组件行为。选项式API（Options API）：与Vue2类似的生命周期钩子组合式API（Composition API）：通过导入函数使用的生命周期钩子Vue3生命周期提供了组件不同阶段的钩子函数，使我们能够精确控制组件行为。无论是使用选项式API还是组合式API，理解生命周期都是掌握Vue3的关键。创建阶段。

原创 Vue2 源码解析——3. Watcher类原理简述

好像只要把这个watcher实例添加到data. a. b. c属性的Dep中就行了。然后，当data. a. b. c的值发生变化时，通知Watcher. 接着, Watcher再执行参数中的这个回调函数。Watcher是一个中介的角色，数据发生变化时通知它，然后它再通知其他地方。parsePath 用于将 路径字符串（如 ‘a.b.c’）转换为一个 函数，这个函数可以安全地访问对象的深层属性。读取数据时，触发 getter，此时 Dep 可以从 window.target 获取到当前 Watcher。

原创 Vue2 源码解析：2. Dep 与 Watcher 核心类

Dep：作为依赖收集容器，每个响应式数据属性对应一个Dep实例，负责管理依赖它的WatcherWatcher：作为依赖的具体表现，连接数据和更新逻辑，接收数据变化通知并执行相应操作它们的协作实现了Vue的核心特性——响应式，使得开发者可以专注于数据逻辑，而无需手动操作DOM。理解这两个类的实现，有助于深入掌握Vue的工作原理和性能优化方向。

原创 Vue3——watch与watchEffect详解

watch适合需要精细控制监听源、需要新旧值对比或需要延迟执行的场景适合简单的副作用处理，自动追踪依赖，代码更简洁优先使用watchEffect处理简单逻辑，使用watch处理复杂场景注意清理副作用，避免内存泄漏组件卸载时，同步创建的监听器会自动停止，异步创建的需要手动停止## 八、深入理解与高级技巧优先使用watchEffect：当你需要自动追踪多个依赖，且不需要旧值时使用watch的场景：需要明确监听源、需要旧值、需要延迟执行或深度监听性能考量避免对大型对象使用深度监听。

原创 VUE底层核心——1 . Object.defineProperty详解

/ 定义数据属性：name（只读、可枚举、可配置）value: '张三',writable: false, // 只读enumerable: true, // 可枚举configurable: true // 可配置（后续可修改描述符）});// 输出："张三"person.name = '李四';// 尝试修改（严格模式下会报错）// 输出："张三"（未被修改）数据劫持是一种编程模式，指的是在访问或修改对象属性时插入自定义逻辑。

原创 JavaScript ——3 .高级数组方法

方法用途返回值是否修改原数组forEach遍历数组并对每个元素执行操作无否map创建一个新数组，包含每个元素经过处理后的结果新数组否filter创建一个新数组，包含通过测试的元素新数组否reduce计算数组元素的总和或其他累积值单个值否find查找满足条件的第一个元素元素或 undefined否some检查数组中是否至少有一个元素通过测试布尔值否every检查数组中所有元素是否通过测试布尔值否。

原创 JavaScript——3. 中级数组方法

slice方法用于提取数组的一部分，返回一个新数组，原数组不变。splice方法用于在数组中添加、删除或替换元素，会直接修改原数组。concat方法用于合并数组，返回一个新数组，原数组不变。

原创 JavaScript——2.数组基础方法

【代码】JavaScript——数组基础方法。

原创 JavaScript——1. 数组方法

原创 Vue3—— 3. reactive 函数

reactive函数是 Vue 3 中用于创建响应式对象的重要工具，它基于 Proxy 和 Reflect API 实现了高效的响应式系统。通过reactive函数，你可以将普通的 JavaScript 对象转换为响应式对象，当对象的属性发生变化时，相关的视图会自动更新。在使用reactive函数时，需要注意它仅支持对象类型，解构赋值会丢失响应性，以及避免直接替换响应式对象等问题。同时，结合 Vue 的组合式 API，reactive函数可以让你更灵活地组织和管理组件的状态。

原创 vue3—— 9. computed计算属性

<p>原始值: {{ count }}</p><p>计算后的值: {{ doubledCount }}</p><button @click="increment">增加</button>

原创 VUE3——8. toRefs函数的使用

在 Vue 3 中，toRefs是一个非常实用的工具函数，它主要用于将一个响应式对象（通常是通过reactive创建的）的所有属性转换为独立的ref对象，并返回一个普通对象。其核心作用是保证解构后的属性仍然保持响应性，避免因直接解构响应式对象而导致属性失去响应性的问题。toRefs函数是 Vue 3 中处理响应式对象解构的重要工具，它可以确保解构后的属性仍然保持响应性，避免因直接解构而导致的响应式丢失问题。在实际开发中，当需要解构响应式对象或传递响应式对象的属性时，使用toRefs。

原创 Vue3—— 7. setup 函数参数实战

setup() {console.log("子组件传的值是：", val);},});解释：使用定义一个组件，在setup函数中定义了一个getChild方法，该方法接收一个参数val，并打印出子组件传递过来的值。最后将getChild方法返回，以便在模板中使用。同时，注册了子组件Child。

原创 VUE3——6. setup 函数参数

// 子组件不使用 props 接收// 打印父组件传递的数据return {};});

原创 VUE3——5. vue3的响应式原理

Vue3 的响应式系统通过Proxy和Reflect的配合使用，实现了更强大、更高效的响应式机制。Proxy提供了更全面的拦截能力，可以捕获对象的各种操作，而Reflect则提供了一种方便的方式来操作对象的属性。这种实现方式解决了 Vue2 中存在的一些问题，如无法检测对象属性的新增和删除、数组操作的支持有限等。同时，Vue3 的响应式系统还引入了依赖收集和触发更新的机制，使得系统能够自动追踪依赖关系并在数据变化时及时通知相关的依赖进行更新。

原创 VUE3——Vue3中ref和reactive的区别详解

ref：适用于基本数据类型或需要解构赋值的情况，在模板中使用时无需.value，但在 JavaScript 中访问需要.value。示例代码如下：// 访问响应式数据的值需要使用.valuereactive：适用于对象和数组，能自动追踪对象内部的属性变化，无需额外配置。示例代码如下：综上所述，ref更适合基本数据类型，reactive更适合对象和数组。在模板中使用ref时无需.value，但在 JavaScript 中访问需要.value；reactive。