triggerV的博客

Vue中v-if指令遇到dataForm.unknowData.version报错的原因是当unknowData为undefined/null时访问其version属性会抛出TypeError。解决方案包括：1)初始化时确保数据存在；2)使用&&运算符检查dataForm.unknowData && dataForm.unknowData.version；3)在Vue3中使用可选链操作符dataForm.unknowData?.version。这些方法都能有效避免访问未定义对

本文介绍了如何使用Webpack和Vue3搭建前端项目。首先通过npm初始化项目并安装Vue、Webpack及相关依赖，然后创建项目结构包括Vue组件、入口文件和HTML模板。接着配置Webpack处理Vue文件、JavaScript、CSS和图片资源，并设置开发服务器。最后添加构建脚本，可通过npm run dev启动开发服务器或npm run build生成生产环境代码。整个过程涵盖了从项目初始化到开发构建的完整流程，为Vue3项目提供了基础配置方案。

Vite是一款基于原生ESM的前端构建工具，由开发服务器和构建指令两部分组成。其核心优势在于极速冷启动和高效热更新(HMR)，通过原生ESM支持实现按需编译，开发速度比传统打包工具快数倍。实现原理上，Vite利用浏览器原生ESM特性动态加载模块，使用Rollup进行生产环境打包，并通过WebSocket实现实时热更新。服务器启动后会解析请求、转换模块并监听文件变化，当文件修改时通过HMR机制局部更新而无需刷新页面。这种架构使Vite在项目规模增大时仍能保持快速构建。

Webpack是一个现代JavaScript应用的静态模块打包工具，它通过构建依赖关系图将各种资源（如JS、CSS、图片等）打包成静态文件。核心功能包括模块打包、依赖管理、文件转换、代码拆分和插件扩展。Webpack工作流程分为三个阶段：初始化阶段（参数处理、创建编译器）、构建阶段（递归解析依赖，调用loader转译模块）和生成阶段（输出打包结果）。通过配置entry、output、loader、plugin等选项，Webpack可以实现高效的资源管理和优化，支持多种文件类型的转换和按需加载，大大提升了前端

Jest和Puppeteer是前端测试的两种主流工具：Jest专注于单元测试，提供简洁API和快速执行；Puppeteer适用于端到端测试，通过真实浏览器模拟用户操作。Jest学习曲线平缓但浏览器模拟有限，Puppeteer功能全面但资源消耗较大。实际应用中，单元测试保证代码基础质量，端到端测试验证整体流程，二者可结合使用以获得更全面的测试覆盖。选择工具时应根据项目需求，平衡测试粒度与执行效率。

文字渐变效果实现与问题解决 摘要：使用-webkit-background-clip: text可实现文字渐变效果，需配合color: transparent。当设置固定高度后渐变变淡，原因是文字位置偏移导致只显示部分渐变。解决方案是使用line-height代替height，确保文字垂直居中，如父容器高20px时设置line-height: 20px，既能防止文字溢出，又能保持渐变效果完整。

Flex布局是一种弹性盒子模型，用于实现网页在不同设备上的自适应展示，主要概念包括弹性容器（父元素）、弹性项目（子元素）以及主轴和侧轴。关键属性包括：flex-direction（定义主轴方向）、justify-content（主轴对齐方式）、align-items（侧轴对齐方式）和flex-wrap（换行设置）。网格布局它将网页划分成一个个网格，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格。

HTML5引入了多项重要特性：1)语义化标签(nav、section等)优化文档结构；2)增强表单功能，新增日期/搜索等输入类型及验证属性；3)原生支持音视频(支持多种格式)；4)两种绘图方案：Canvas(像素级)和SVG(矢量图形)；5)地理定位API获取用户位置；6)拖放API实现元素交互；7)WebWorker创建多线程；8)WebStorage(5M容量)替代Cookie存储；9)WebSocket实现全双工通信。这些特性显著提升了Web应用的交互体验和功能丰富性。

Vue提供了toRaw()和markRaw()方法处理响应式数据转换。toRaw()用于获取响应式对象的原始版本，操作原始对象不会触发页面更新。markRaw()则标记对象不被响应式系统处理，适用于静态数据或性能优化场景。需注意：toRaw不解除响应式，markRaw对已响应式对象无效；嵌套对象可能存在身份不一致问题，原始版本与代理版本可能不同。合理使用这些方法可优化性能，但需谨慎处理对象引用关系。

Element UI 设置 el-table-column 宽度 width 为百分比无效，原因是el-table 组件会被 vue 解析成 html，vue 直接把百分号去掉把数值当做列宽来呈现，所以，width 设置百分比的值直接被解析去掉百分号% 变成 px 了

DOM（Document Object Model）是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的APIDOM 节点是 DOM 模型的组成单元。HTML 的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签DOM 树是 DOM 结构的表示形式，DOM 把文档的每个节点根据父子关系连接，形成 DOM 树

函数实际上是对象，每个函数都是 Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样因为函数是对象，所以函数名就是指向函数对象的指针，而且不一定与函数本身紧密绑定

行为型模式关注对象之间的通信和交互，旨在解决对象之间的责任分配和算法的封装包括：责任链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、空对象模式、策略模式、模板模式、访问者模式

上篇介绍了设计模式之创建型模式，接下来介绍设计模式之结构型模式，这些模式关注对象之间的组合和关系，旨在解决如何构建灵活且可复用的类和对象结构

循环是迭代机制的基础，因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的迭代会在一个有序集合上进行，"有序"可以理解为集合所有项都可以按照既定的顺序被遍历到，数组就是 JavaScript 中有序集合的最典型例子

原始值就是最简单的数据，引用值则是由多个值构成的对象。在把一个值赋给变量时，JavaScript引擎必须要确定这个值是原始值还是引用值原始值大小固定，保存在栈内存上；引用值是对象，存储在堆内存上

想要用ECharts实现：鼠标可以进入图表的tooltip框，并点击其中的内容进行交互。实现这个过程中会遇到一些问题，下面是对其进行总结，并给出解决方案。

数据在 vue 中是单向流动的，有利于管理数据状态和变化。而在日常组件开发中，难以避免组件之间的数据通信。组件通信可以分为不同的场景，例如父子组件通信、兄弟组件通信、跨层级组件通信等。

JavaScript 是单线程，H5 允许 JavaScript 创建多个线程，但是子线程受主线程控制，并且不能操作 DOM。所有任务分为同步任务和异步任务。

vite与webpack有什么不同？为什么vite构建速度比webpack快？

入门函数式编程 一些基本内容

浏览器 node 下的事件循环机制

JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流

假设有一个导入语句：import { a } from “moduleA”（1）编译器通过绝对或相对路径，定位到需要导入的模块文件（2）如果上面解析失败了，没有查找到对应的模块，编译器会尝试定位一个外部模块声明（3）最后，还是不能解析这个模块，就直接抛出一个错误TS Map文件是一个源映射文件，其中有关原始文件的信息。.map是源映射文件，在JS代码和创建它的TS源文件之间进行映射调试调的是TS文件接口用于一个类的话，那接口会表示行为抽象对类的约束，让类去实现接口，类可以实现多个接口。

以前端角度来看序列化 以及 如何实现axios序列化

vue项目中常见的性能优化

- 会话：客户端打开与服务器的连接发出请求 到 服务器响应客户端请求的全过程- 会话跟踪：对同一个用户对服务器的连续请求和接收响应的监视- why：浏览器和服务器之间是通过**HTTP（无状态）协议通信**的，它不能保持客户的信息，一次响应之后连接就断开了，下一次请求还需要重新连接，需要**判断是否为同一用户**，因此会话跟踪就来实现这个要求了

常见的一些业务需求实现方案

实现水平垂直居中

两栏布局的实现方法

网络相关面试题

手写实现

this的指向问题

防抖节流的区别、使用场景、实现函数

图片懒加载的常见实现方法

git常见命令

webpack常见面试题

HTML5 & CSS3常见新特性

常见布局模式