大宇宇宇 前端开发练习生

Vue中的$nextTick有什么作用?

一、NextTick是什么 官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM 什么意思呢? 我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再

大宇宇宇 大宇宇宇 发布于 2025-09-03

ref和reactive的区别

在 Vue3 中,响应式系统是其核心特性之一。Vue 3 提供了两种主要的方式来创建响应式数据:ref 和 reactive。它们都属于

大宇宇宇 大宇宇宇 发布于 2025-09-03

toRef和toRefs的区别

toRef 和 toRefs的作用: toRef: 基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值,反之亦然。通俗来说,就是复制 reactive 里的单个属性并转成 ref,改变该属性的值将更新ref的值,反之,改变复

大宇宇宇 大宇宇宇 发布于 2025-09-03

vue3新特性

Vue3.0相较于Vue2.0有了很大的提升,本篇是对Vue3.0新特性的总结,分别从 语法 API、响应式系统增强、Teleport、Suspense 这几方面进行详细介绍及使用方式: 语法和 API 层面 组合式 API(Composition API) 原理: 组合式 API 是 Vue 3

大宇宇宇 大宇宇宇 发布于 2025-09-03

支付功能怎么做

在Vue中实现支付功能 选择支付方式:根据业务需求选择支付渠道(支付宝、微信支付、银联等),通常使用第三方支付SDK或支付网关。 后端集成:支付逻辑主要在后端实现,前端负责展示支付界面和调用支付接口。后端会处理订单创建、支付请求生成和支付回调验证。 前端实现: 创建支付页面组件,展示订单信息和支付方

大宇宇宇 大宇宇宇 发布于 2025-09-02

前端工程化

在 Vue 中,前端工程化是通过工具链和规范提升开发效率、代码质量和维护性的实践。 1. 脚手架工具(Vue CLI / Vite) 作用:快速初始化项目,集成开发环境配置。 核心能力: 项目模板生成(支持 TypeScript、JSX、PWA 等)。 插件化扩展(如 Vuex、Vue Router

大宇宇宇 大宇宇宇 发布于 2025-09-02

vue3引入百度地图

在 Vue 3 中引入百度地图,以下核心要点: 1. 核心实现步骤 // 1. 在 public/index.html 引入百度地图 API <script src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script> // 2. 组件中创

大宇宇宇 大宇宇宇 发布于 2025-09-01

Scoped原理

Scoped原理 Scoped是Vue中的一种样式隔离机制,主要用于防止组件样式污染。其核心原理如下: 编译转换:Vue在编译带有scoped的样式时,会给组件模板中的每个元素添加一个唯一的属性(如data-v-xxxxx),同时将CSS选择器修改为带有这个属性的选择器。 属性选择器:样式规则会被转

大宇宇宇 大宇宇宇 发布于 2025-09-01

diff算法

在Vue中,diff算法是虚拟DOM(Virtual DOM)的核心优化机制,用于高效比较新旧虚拟DOM树的差异,并最小化真实DOM操作。 1. 核心目标 高效更新:通过对比新旧虚拟DOM,找出最小差异,避免全量渲染,提升性能。 减少DOM操作:真实DOM操作成本高,diff算法只更新必要部分。 2

大宇宇宇 大宇宇宇 发布于 2025-09-01

vue是怎么渲染模板的

Vue的模板渲染过程主要分为三个核心阶段:模板解析 → 生成渲染函数 → 虚拟DOM渲染。 1. 模板解析(Parse) 目标:将模板字符串(如 <div>{{ msg }}</div>)转化为 抽象语法树(AST)。 过程: 使用正则表达式和词法/语法分析器解析模板。 识别标签、属性、指令(如 v

大宇宇宇 大宇宇宇 发布于 2025-09-01

vue源码

一、响应式原理(核心考点) 核心机制: Vue 2:Object.defineProperty 劫持对象属性,通过 Dep(依赖收集器)和 Watcher(观察者)实现依赖收集与更新派发。 缺陷:无法监听数组索引/长度变化、对象新增属性(需 Vue.set)。 Vue 3:Proxy

大宇宇宇 大宇宇宇 发布于 2025-09-01

打包压缩,dist 文件过大怎么解决

在Vue项目中,dist文件过大的问题通常由资源冗余、依赖未优化或打包配置不当导致。 1. 代码分割(Code Splitting) 原理:按需加载,减少初始包体积。 实现: 路由懒加载:使用动态 import() 语法拆分路由组件。 const routes = [ { path: '/hom

大宇宇宇 大宇宇宇 发布于 2025-09-01
上一页 下一页