初始阶段。长文本博客做模型上下文。新书《千界明彻录》（故事形式构建元思维）——胡说小说。更多思辨内容在公众号。

Vue3+Element Plus如何实现左树右表页面：即根据左边的树筛选右侧表功能实现。前端用的vue3+Element Plus可以自行创建脚手架也可以用已经创建的，在github上；（注意安装node，版本建议16以上）下载后直接npm i后即可，组件路由都配了，快速验证，如果用到，帮忙点个Follow（可能要代理）下载后把Emp.vue原本的代码删除即可。

Vue Router是Vue.js官方的路由管理器，它为我们提供了在单页面应用程序（SPA）中切换页面的能力，并支持动态路由、重定向、命名路由等高级功能。本文将深入探讨Vue Router的基本用法、重定向和命名路由、动态路由的处理方式，以及路由守卫的实现与其对性能的影响

侦听器适合需要在数据变化时执行异步操作或复杂逻辑的场景，提供了对数据变化的细粒度控制。计算属性适合需要基于现有数据进行计算并希望结果被缓存的场景，提供了性能优化的途径。方法适合处理用户交互和事件，以及不需要缓存的计算逻辑，提供了灵活的函数调用方式。

在前端开发中，发起 HTTP 请求是与服务器交互的核心操作。Axios 和 Fetch 是两种常用的 HTTP 请求工具。本文将详细介绍 Axios 的基本用法，并对比其与原生 Fetch API 的区别，帮助开发者在实际项目中做出合适的选择。

在 Vue 项目开发中，构建工具是提升开发效率的重要因素。Vue CLI 和 Vite 是两种主流的 Vue 项目构建工具，它们在项目初始化、配置灵活性、性能和插件体系上各具特色。本文将深入探讨 Vue CLI 与 Vite 的基本概念，如何在 Vue 2 和 Vue 3 项目中使用它们进行快速开发，并讨论在 Vue 3 中如何实现自定义 Vite 插件。

在现代前端开发中，数据请求是与后端进行交互的核心环节。AJAX、Promise 和 Axios 是实现异步请求的三大关键工具。了解它们的基本概念、用法及在 Vue 框架中的应用，能够有效提升前端开发的效率与代码质量。

在 Vue.js 应用开发中，状态管理是一个关键问题，尤其在大型应用中，组件间共享数据和管理复杂的业务逻辑成为难题。Vuex 一直是 Vue 官方推荐的状态管理工具，而 Vue 3 的出现带来了另一种选择——Pinia。本文将对 Vuex 和 Pinia 进行深入对比，并讨论如何在 Vue 3 中实现高效的状态管理。

在Vue中，`v-for`用于循环渲染数组或对象的数据，并生成对应的DOM结构。与此配合使用的`:key`属性，在列表渲染中起着至关重要的作用。本文将详细探讨如何使用`v-for`进行高效的列表渲染，`:key`属性在性能优化中的重要性，以及在复杂嵌套结构中使用`v-for`时的注意事项。

在Vue中，`v-if`和`v-show`是用于控制元素显示和隐藏的两种常见指令。尽管它们的功能看似相似，但在实现机制、性能影响和使用场景上有显著差异。本文将深入探讨`v-if`与`v-show`的区别、各自的性能影响以及如何根据实际场景选择合适的指令进行条件渲染。

在Vue 2中，过滤器（`filter`）常用于模板中对数据进行简单的格式化处理。然而，在Vue 3中，过滤器被移除了。本文将探讨Vue 3中去掉过滤器的原因，并讨论如何使用计算属性等方式替代过滤器功能。同时，我们将讨论过滤器的最佳实践及如何在Vue 3中实现类似的功能

Vue 3引入了全新的响应式系统，提供了`ref`和`reactive`两种方式来处理数据的响应性。理解这两者的定义、用法以及底层实现，对于高效使用Vue 3至关重要。本文将对`ref`和`reactive`进行深入解析，并探讨它们的使用场景和响应式系统的底层机制。

在Vue 3中，计算属性和`watch`是两个非常重要的特性，用于实现响应式编程。理解这两者的基本用法、性能优化及其在大型应用中的应用场景，对于提升开发效率和应用性能至关重要。本文将详细解析计算属性与`watch`的用法及其优化技巧。

在JavaScript中，声明变量的方式有三种：`let`、`var`和`const`。这些关键字在作用域、变量提升和可变性方面有不同的表现，选择合适的声明方式对于编写高效、可维护的代码至关重要。本文将深入探讨三者的区别、使用场景，并分析如何选择合适的变量声明方式以及在不同上下文中变量提升的表现。

JavaScript中的箭头函数（Arrow Function）是ES6引入的一种更简洁的函数定义方式。它不仅减少了代码书写量，还带来了与传统函数不同的特性，尤其是在处理`this`绑定时表现得更加灵活。本文将深入探讨箭头函数的定义与用法、与传统函数的区别、在不同上下文中的使用方式，以及在React中的实际应用。

本文将深入探讨BOM的组成、跨域请求的实现以及不同浏览器对BOM的支持差异，并介绍浏览器的基本工作原理、优化页面加载速度的技巧以及使用Chrome DevTools调试性能问题的最佳实践。

JavaScript的事件处理机制是现代Web应用的核心之一。理解事件的基本用法、事件冒泡和捕获的区别、事件委托的概念及其性能优化策略，对于开发复杂交互性网站至关重要。本文将全面讨论事件处理、事件冒泡捕获、自定义事件以及事件委托等内容，并结合实际应用场景深入探讨这些机制的最佳实践。

路径参数：适用于唯一标识资源的情况。查询参数：适用于非关键数据的传递，如过滤和排序。路由元数据：适用于控制路由行为的自定义数据，如权限控制。命名视图：适用于需要在同一路由下显示多个视图的情况。导航守卫：适用于在路由切换时进行逻辑处理，如数据传递和权限检查。

特点routerroute定义Vue Router 实例，管理应用程序的所有路由当前激活的路由信息对象主要用途定义路由、导航、访问和修改全局路由状态获取当前路由的信息，如路径、参数、查询参数、名称等访问方式通过或导入router实例通过或组合式 API 中的useRoute获取示例router：Vue Router 实例，用于管理路由、导航和全局路由状态。route：当前激活的路由信息对象，用于获取当前路由的路径、参数、查询参数等。

在setup()函数中，可以使用 Vue 提供的响应式 API（如ref和reactive）来定义响应式状态。ref用于创建单个值的响应式引用，reactive用于创建对象的响应式引用。setup()定义响应式状态（使用ref和reactive使用计算属性（使用computed声明方法使用生命周期钩子（如onMounted使用依赖注入和提供（provide和inject组合逻辑（创建可复用的组合函数）通过setup()函数，开发者可以更灵活地组织和复用逻辑，增强代码的可读性和维护性。

Props: 父组件向子组件传递数据。: 子组件向父组件传递数据或事件。: 在祖先组件和后代组件之间传递数据。Event Bus: 在任意组件之间传递事件。: 全局状态管理，适用于大型应用。Slots: 父组件向子组件传递模板内容。合理选择组件通信方式，可以提高代码的可维护性和可读性，适应不同的应用场景。

web前端三大主流框架都是Angular、React、Vue。相比老版本的变化（区别）：性能提升 （打包体积，渲染速度，内存使用）源码升级（使用proxy代替defineProperty，重写虚拟dom）支持typescript新特性（组合式Api,内置组件，生命周期等）渐进式框架。

在 Vue 3 中，生命周期函数用于在组件的不同阶段执行特定的逻辑。在选项式 API 和组合式 API 中，生命周期函数的定义和使用方式有所不同。下面是它们的对比列表以及每个函数的作用解释。

在 Vue 3 中，有两种主要的组件定义方式：选项式 API 和组合式 API。它们在编写方式和逻辑组织上有所不同，各有优缺点。下面详细解释它们的区别。

自定义渲染器：Vue 3提供了创建自定义渲染器的API，使得Vue不仅能用于Web开发，还能用于构建原生应用、游戏等。Vue 3相对于Vue 2，引入了许多新特性和改进，使得开发体验更好、性能更高，并且对大型应用和复杂组件的支持更加完善。同时，Vue 3对TypeScript的友好支持使其在现代前端开发中更具竞争力。开发者在迁移到Vue 3时，需要注意新特性的使用和一些API的变更，以充分利用Vue 3的优势。

Vue 3保留了Vue 2中的大多数指令，并在此基础上进行了优化和改进。通过这些基本指令，开发者可以在模板中轻松地进行数据绑定、事件处理、条件渲染和列表渲染等操作，提高开发效率和代码可读性。

JavaScript是一门动态类型的编程语言，其数据类型的理解对于开发者来说至关重要。本文将全面探讨JavaScript中的数据类型、基本和复杂数据类型的区别、类型转换规则、如何使用和判断类型，以及原始类型与对象类型的区别。JavaScript中数据类型主要分为两类：基本数据类型和复杂数据类型。基本数据类型：每个基本数据类型都只有一个值，并且赋值后不可变。例如：复杂数据类型：可以包含多个值，赋值时会创建一个引用。例如：4. 类型转换的规则JavaScript中有两种类型转换：隐式转换和显式转

在Web开发中，DOM元素的获取是与页面交互的基础。JavaScript提供了多种方法来获取元素，每种方法都有其特点和适用场景。本文将全面探讨常用的元素获取方式，包括等的比较，性能优化策略，以及Shadow DOM的概念与应用，最后讨论的历史及其潜在风险。

文档对象模型（DOM）是Web开发中的核心概念，它提供了一种结构化的方法来表示和操作HTML和XML文档。通过DOM，开发者可以动态地访问和更新文档的内容、结构和样式。本文将深入探讨DOM的概念与结构、操作DOM节点的方法、DOM树的形成过程，以及如何使用DOMParser解析字符串为DOM对象。

Flex布局（弹性布局）是CSS3中引入的一种布局模式，使得开发者能够以更高效的方式设计复杂的网页布局。通过Flex布局，可以轻松控制元素的排列、对齐和分配空间。本文将深入探讨Flex的基本用法、flex-grow和的使用、创建响应式布局的方法，以及Flex布局与Grid布局的应用场景。

CSS盒模型是前端开发中的基础概念，决定了元素在网页上的空间占用和布局方式。理解盒模型的组成和计算方式对构建合理的网页布局至关重要。本文将探讨盒模型的组成、计算总宽度和高度的方法、不同实现方式的处理，以及box-sizing属性的影响。

CSS定位是网页布局的重要组成部分，通过不同的定位方式，开发者能够精确控制元素在页面上的位置和层叠顺序。本文将探讨各种定位方式的优缺点、叠加上下文的概念、z-index的工作原理及其与层叠上下文的关系，以及如何处理不同浏览器中的定位兼容性问题。

在CSS布局的历史中，`float`属性曾是网页布局的主要工具之一。然而，随着现代布局技术（如`Flexbox`和`Grid`）的兴起，`float`布局逐渐被替代。本博客将探讨`float`的概念、应用、清除浮动的方式，以及现代布局技术`Flex`和`Grid`的区别，并讨论`float`布局的历史和现状。

在网页布局中，CSS的显示模式（Display Mode）决定了元素在页面中的排列方式。理解块级元素、内联元素的区别以及如何自定义显示模式，是实现高效、灵活布局的关键。本篇博客将深入讨论CSS中的显示模式，包括如何改变和自定义显示模式，以及`display: contents;`的作用及其影响。

在网页开发中，HTML标签不仅仅用于构建页面的结构，更在SEO（搜索引擎优化）中扮演了关键角色。通过合理使用语义化标签，可以提升网页的可读性与搜索引擎的友好度。而诸如和标签，更在现代Web组件开发中起到了重要作用。本博客将深入讨论常用标签的选择、语义化使用及其在SEO中的优化方法，同时探讨和在Web开发中的用法。

Node.js 是一个用于在浏览器之外执行 JavaScript 代码的运行环境。它基于 Google Chrome 的 V8 JavaScript 引擎，这使得开发者可以使用 JavaScript 进行服务端脚本编写，从而开发动态的 Web 应用程序。Node.js 以其非阻塞、事件驱动的架构而著称，这使其在处理 I/O 密集型应用时非常高效。

让我们来详细解释一下Axios，以及它与AJAX和Promise的关系。