当前位置: 首页 > news >正文

Vue2 相关知识点整理

一、Vue2 核心机制

1. Vue2 的响应式原理是什么?
  • 答案
    Vue2 通过 Object.defineProperty 给对象的每个属性添加 gettersetter,当数据被访问或修改时,自动触发视图更新。
  • 通俗解释
    就像给每个数据绑了一个“监控摄像头”,数据一变化,立即通知页面刷新。
  • 代码示例
    const data = { name: '张三' };
    Object.defineProperty(data, 'name', {get() { console.log('有人读取name了'); },set(newVal) { console.log('有人修改name了,更新页面!'); }
    });
    

2. Vue 的生命周期钩子有哪些?
  • 核心钩子
    • beforeCreate:实例刚创建,数据观测和事件还未初始化(无法访问 data)。
    • created:数据已初始化,可调用接口,但 DOM 未渲染(常用于数据请求)。
    • beforeMount:模板编译完成,但未挂载到页面。
    • mounted:DOM 已渲染完成,可操作 DOM 或第三方库(如初始化地图)。
    • beforeUpdate:数据变化前,可获取更新前的 DOM 状态。
    • updated:数据变化后,DOM 已更新(避免在此修改数据,可能导致死循环)。
    • beforeDestroy:实例销毁前,清理定时器或解绑事件。
    • destroyed:实例销毁完成。
  • 口诀:创建 → 挂载 → 更新 → 销毁,每个阶段都有“前”和“后”。

二、模板与指令

3. v-ifv-show 的区别?
  • v-if:条件为假时,元素从 DOM 中移除。适合切换频率低的场景(如权限控制)。
  • v-show:通过 CSS 的 display: none 隐藏元素,DOM 仍存在。适合频繁切换的场景(如折叠面板)。
  • 比喻
    v-if 像拆房子(重建成本高),v-show 像关灯(快速切换)。

4. computedwatch 的区别?
  • computed

    • 缓存:依赖的数据不变时,直接返回缓存结果。
    • 场景:多数据影响的复杂计算(如购物车总价)。
    computed: {total() { return this.price * this.quantity; }
    }
    
  • watch

    • 监听:数据变化时执行异步或复杂操作(如搜索请求)。
    • 场景:数据变化后需要额外处理(如路由参数变化重新加载数据)。
    watch: {searchText(newVal) { this.fetchData(newVal); }
    }
    

三、组件通信

5. 父子组件如何通信?
  • 父 → 子

    <!-- 父组件传递数据 -->
    <Child :msg="parentMsg" />
    
    // 子组件接收
    props: ['msg']
    
  • 子 → 父

    <!-- 子组件触发事件 -->
    <button @click="$emit('update', data)">提交</button>
    
    <!-- 父组件监听 -->
    <Child @update="handleUpdate" />
    

6. 非父子组件如何通信?
  • Event Bus(事件总线)

    // 创建全局事件中心
    const bus = new Vue();
    // 组件A发送事件
    bus.$emit('message', 'Hello');
    // 组件B监听事件
    bus.$on('message', (msg) => { console.log(msg); });
    
  • Vuex(状态管理)
    集中管理共享状态,适合中大型项目。


四、进阶问题

7. Vue 的虚拟 DOM 是什么?有什么优势?
  • 虚拟 DOM:用 JavaScript 对象描述真实 DOM 结构。
  • 优势
    1. 减少 DOM 操作:通过对比新旧虚拟 DOM,找出最小更新范围。
    2. 跨平台:可渲染到非浏览器环境(如移动端、服务器)。
  • 比喻:虚拟 DOM 像建筑图纸,直接修改图纸比拆房子重建更高效。

8. Vue 的 key 有什么作用?
  • 作用:帮助 Vue 识别节点的唯一性,优化更新性能。
  • 场景:在 v-for 循环中必须使用唯一 key
  • 反例
    没有 key 时,列表顺序变化可能导致元素错误复用(如输入框内容错乱)。

9. Vue 的 nextTick 是做什么的?
  • 作用:在下次 DOM 更新后执行回调,用于获取更新后的 DOM。
  • 场景:修改数据后立即操作 DOM。
    this.message = '更新了';
    this.$nextTick(() => {console.log('DOM 已更新:', this.$el.textContent);
    });
    

五、性能优化

10. 如何优化 Vue 应用的性能?
  1. 编码优化
    • 合理使用 v-ifv-show
    • 避免 v-forv-if 同时用在同一元素。
  2. 加载优化
    • 路由懒加载:const Home = () => import('./Home.vue')
    • 图片懒加载:vue-lazyload 插件。
  3. 缓存优化
    • 使用 keep-alive 缓存组件:
      <keep-alive><router-view></router-view>
      </keep-alive>
      

附:高频问题速查表

问题方向高频考点
响应式原理Object.defineProperty、依赖收集
生命周期created vs mountedbeforeDestroy
组件通信props/$emit、Event Bus、Vuex
指令与语法v-if/v-showv-for+key
性能优化懒加载、keep-alive、虚拟 DOM
进阶原理虚拟 DOM 原理、nextTick 机制

相关文章:

Vue2 相关知识点整理

一、Vue2 核心机制 1. Vue2 的响应式原理是什么&#xff1f; 答案&#xff1a; Vue2 通过 Object.defineProperty 给对象的每个属性添加 getter 和 setter&#xff0c;当数据被访问或修改时&#xff0c;自动触发视图更新。通俗解释&#xff1a; 就像给每个数据绑了一个“监控…...

CSS:编写位置分类及优先级

文章目录 一、行内样式二、内部样式三、外部样式&#xff08;推荐&#xff09;四、优先级五、编码风格 一、行内样式 最好不这样写 二、内部样式 可以使用 三、外部样式&#xff08;推荐&#xff09; 四、优先级 行内样式 > 内部样式 外部样式 五、编码风格...

Tauri 跨平台开发指南及实战:用前端技术征服桌面应用(合集-万字长文)

厌倦了笨重的Electron应用&#xff1f;想要构建体积小、性能高、安全可靠的跨平台桌面应用&#xff1f;Tauri将是你的不二之选&#xff01;本教程带你从入门到精通&#xff0c;掌握这个下一代桌面应用开发框架&#xff0c;并通过实战APK分析工具项目&#xff0c;将理论知识转化…...

深入解析 Linux 进程池:原理、实现与高并发优化

引言 当你的服务器需要同时处理 10,000 个客户端请求时&#xff0c;传统的"来一个请求创建一个进程"模式会导致严重的性能瓶颈。此时&#xff0c;进程池&#xff08;Process Pool&#xff09; 便成为关键解决方案。它像一支训练有素的特种部队&#xff0c;通过预先创…...

[Python]非零基础的快速上手

从js转的python&#xff0c;没有从初学者阶段开始&#xff0c;主打一个快速上手能写再说. pycharm:一种编辑器 数据类型 基本数据类型:整型(整数)、浮点型、字符型、布尔型 复杂数据类型:列表(数组)、集合区{1,2,3}、元组(1,3.4)字典{n’:2,b:1} 模板字符串 输出模板字符串…...

《算法笔记》10.5小节——图算法专题->最小生成树 问题 E: Jungle Roads

题目描述 The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid money was spent on extra roads between villages some years ago. But the jungle overtakes roads relentlessly, so the large road network is too expensive to mai…...

数据中心网络架构:高效规划与自动化设计实践

在数据中心网络架构规划设计中&#xff0c;面临如下难点&#xff1a; 设备数量庞大&#xff1a; 服务器、交换机等设备数量多&#xff0c;如何合理规划机柜布局和空间分配&#xff0c;避免资源浪费或密度超标&#xff0c;成为设计难点。 线缆设计复杂&#xff1a; 海量线缆…...

Mysql存储引擎、锁机制

Mysql存储引擎 InnoDB​&#xff08;MySQL 5.5 及以后版本中的默认存储引擎&#xff09; ​​事务支持​​&#xff1a;支持 ​​ACID 事务​​&#xff0c;适合需要高可靠性的场景&#xff08;如支付、订单&#xff09;。 ​​锁机制​​&#xff1a;默认使用 ​​行级锁​​…...

UVA1537 Picnic Planning

目录 题目算法标签: 最小生成树, k r u s k a l kruskal kruskal重构树, 树形 d p dp dp思路重构树代码 题目 UVA1537 Picnic Planning 算法标签: 最小生成树, k r u s k a l kruskal kruskal重构树, 树形 d p dp dp 思路 将 1 1 1号点设置为终点, 然后执行重构树计算度数…...

通过AWS Console连接服务器,简化运维过程

简单通过AWS Console连接您的Linux服务器 本文作者: 封磊 Eclicktech SA | AWS Community Builder DevTool | AWS UGL | 亚马逊云科技云博主 阿里云&InfoQ&CSDN签约作者 文章目录 简单通过AWS Console连接您的Linux服务器本文作者: 封磊Eclicktech SA | AWS Community …...

公交实时查询小程序功能点开发

线路查询&#xff1a;用户可输入公交线路号码&#xff0c;小程序实时显示该线路车辆位置与发车信息&#xff0c;能一键切换行驶方向&#xff0c;助用户依实时情况选合适候车站点。站点查询&#xff1a;输入车站信息&#xff0c;小程序呈现经过该站所有公交线路及公交信息&#…...

nginx配置集群服务器中的tcp负载均衡器

文章目录 前言1. Ubuntu下nginx安装2. nginx的tcp负载配置 前言 假设一台机器支持两万的并发量&#xff0c;现在我们需要保证八万的并发量。首先想到的是升级服务器的配置&#xff0c;比如提高 CPU 执行频率&#xff0c;加大内存等提高机器的物理性能来解决此问题。但是单台机…...

Qt/C++开发监控GB28181系统/获取设备信息/设备配置参数/通道信息/设备状态

一、前言 设备注册成功后&#xff0c;接下来要做的就是获取设备的信息&#xff0c;尤其是通道信息&#xff0c;根据国标协议&#xff0c;永远只有两个层级&#xff0c;一个是设备&#xff0c;然后就是设备下面多个通道&#xff0c;设备编码在整个系统中唯一&#xff0c;通道编…...

Linux系统基础:基础指令简介(网络概念部分)

简介&#xff1a;Linux 是一种开源的类 Unix 操作系统内核&#xff0c;由 Linus Torvalds 于 1991 年首次发布。经过多年发展&#xff0c;它已成为服务器、嵌入式设备和个人计算机领域的重要操作系统。 网络基础概念 初始协议 简单来说&#xff0c;协议是一种约定&#xff0…...

labview项目文件架构

为了使 LabVIEW 项目更具可扩展性和易于维护&#xff0c;合理规划和设计项目文件结构是非常重要的。 以下是一些基于行业经验和最佳实践的建议&#xff1a; 1. ### 文件夹层次划分 将不同的功能模块分开存储在一个清晰的分层目录结构中是一个常见的做法。通常情况下&#xff…...

nuxt项目中引入并配置 iview

安装iview npm install iview --save注&#xff1a;想要加入其它的配置&#xff0c;可以在 nuxt.config.js 的 plugins 配置项中加入&#xff0c;同时在 plugins 文件夹下加入引入逻辑。 在nuxt.config.js文件中写&#xff1a; {src: ~plugins/iview, ssr: true}同时新建 plugi…...

Origin绘图操作:点线图符号显示不全解决方法

一、问题说明 在用origin绘制点线图时&#xff0c;图表刻度线处的点符号显示不完全&#xff0c;如图所示&#xff1a; 二、解决方法 方法一&#xff1a;调整坐标轴刻度&#xff0c;使其能够显示全部数据点。 方法二&#xff1a;有时为了图表美观&#xff0c;则不对坐标轴刻…...

【进程与线程】

文章目录 一、实验目的二、实验内容与设计思想实验内容设计思路 三、实验代码实现四、总结 一、实验目的 1.深刻理解进程和线程的概念&#xff0c;掌握线程与进程在组成成分上的差别&#xff1b; 2.进一步认识并发执行的实质。 二、实验内容与设计思想 实验内容 用pipe()创…...

项目实战-飞机大战【补档】

和项目实战-贪吃蛇大作战【补档】-CSDN博客一样&#xff0c;这也是一个我在大一和网友完成的项目的补档。Dont waste your youth—time flies. 目录 1.工具&环境 2.项目简介 3.需求文档 4.流程图 5.产品原型图 6.可行性分析 7.源代码 8.实战效果 ​编辑 9.心得…...

算法基础学习|02归并排序——分治

一、思路 &#xff08;1&#xff09;确定分界点&#xff1a;mid(lr)/2 ——这里和快排不同 &#xff08;2&#xff09;递归排序&#xff08;left right&#xff09; &#xff08;3&#xff09;归并——合二为一 时间复杂度nlogn 二、题目练习 三、模板 归并排序 …...

测试基础笔记第十六天

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、UI自动化介绍1.认识UI自动化测试2.实施UI自动化测试前置条件3.UI自动化测试执行时机4.UI自动化测试核心作用和劣势 二、认识Web自动化测试工具-Selenium021.Sel…...

Android项目中使用ComposeUI

首先确认项目环境kotlin版本&#xff0c;以下是本机的版本 使用命令 ./gradlew -version 这里kotlin 版本是1.5.31 然后查看build.gradle sdk版本 这里是32 属于低版本 然后需要添加以下配置 buildFeatures {compose true}composeOptions {kotlinCompilerExtensionVersio…...

springboot中有关数据库信息转换的处理

现代项目一般都是前后端分离的&#xff0c;前端只负责展示数据&#xff0c;不负责对数据处理&#xff0c;所以所有数据处理工作都由后端进行 比如在仿京东中的status&#xff0c;审核信息展示&#xff0c;数据库中是以0/1显示&#xff0c;但是前端需要以"审核/未审核&quo…...

HHsuite同源序列搜索数据库构建

HHsuite 可用的数据库格式简介 HHsuite 是用于蛋白质序列比对和同源性检测的工具套件,它使用特定的数据库格式以实现高效的数据存储和快速的检索。HHsuite 常用的数据库格式主要基于 FFINDEX(Flat-File Index),这是一种简单而高效的文件索引系统,它将数据文件(如蛋白质序…...

大模型推理:Qwen3 32B vLLM Docker本地部署

Qwen3基础知识 此次Qwen3开源8个模型&#xff08;MOE架构&#xff1a;Qwen3-235B-A22B、Qwen3-30B-A3B&#xff0c;Dense架构&#xff1a;Qwen3 0.6B/1.7B/4B/8B/14B/32B&#xff09;&#xff0c;新版本的Qwen3特性包括&#xff1a; 支持混合思维模式&#xff0c;即推理/非推…...

第十六届蓝桥杯 2025 C/C++B组 第二轮省赛 全部题解(未完结)

目录 前言&#xff1a; 试题A&#xff1a;密密摆放 试题B&#xff1a;脉冲强度之和 试题C&#xff1a;25之和 试题D&#xff1a;旗帜 试题H&#xff1a;破解信息 前言&#xff1a; 这是我后续刷到的第二轮省赛的题目&#xff0c;我自己也做了一下&#xff0c;和第一轮省赛…...

域名转移:什么是转移码/EPP码/授权码?

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…...

Android 系统发展史

Android 1.0&#xff1a;2008年9月 全球第一台安卓设备是 HTC Dream Google地图、YouTube、HTML浏览器、Gmail、即使消息、短信、彩信、日历等 Android Market&#xff08;应用程序商店&#xff09; Android 1.1&#xff1a;2009年2月&#xff08;Petit Four 花色小蛋糕&am…...

Python中的defaultdict方法

文章目录 核心特点基本语法常见使用场景1. 分组数据&#xff08;默认值为列表&#xff09;2. 计数&#xff08;默认值为整数&#xff09;3. 集合操作&#xff08;默认值为集合&#xff09;4. 嵌套字典 注意事项与普通字典对比总结1. 键&#xff08;Key&#xff09;的类型2. 值&…...

Android启动应用时屏蔽RecyclerView滑动,延时后再允许滑动,Kotlin

Android启动应用时屏蔽RecyclerView滑动&#xff0c;延时后再允许滑动&#xff0c;Kotlin var bCanScrollVertically falselifecycleScope.launch(Dispatchers.Default) {repeatOnLifecycle(Lifecycle.State.CREATED) {Log.d(TAG, "Lifecycle.State.CREATED")delay(…...

2025运维工程师面试题1(答案在后一张)

一、逻辑思维能力考核&#xff1a; 问题1&#xff1a; 3个人去投宿&#xff0c;一晚30元三个人每人掏了10元凑够30元交给了老板后来老板说今天优惠只要25元就够了&#xff0c;拿出5元命令服务生退还给他们&#xff0c;服务生偷偷藏起了2元&#xff0c;然后&#xff0c;把剩下…...

在网页中使用【LaTeX 数学公式块】的完整步骤总结

以下是在网页中使用 LaTeX 数学公式块的完整步骤总结&#xff0c;记录如何让网页正确渲染 LaTeX 数学表达式&#xff08;如 \(H(X) -\sum p(x) \log p(x)\) 这样的公式&#xff09;&#xff1a; ✅ 使用 LaTeX 数学公式块的完整步骤&#xff08;以 KaTeX 为例&#xff09; &am…...

新人销售如何找精准客户?

深入了解自身产品或服务。 清晰掌握产品优势、应用场景和解决的问题&#xff0c;比如销售办公软件&#xff0c;要熟知其提升办公效率的具体功能&#xff0c;以此定位需求客户。 利用社交媒体平台。 像领英可完善资料&#xff0c;加入行业群组分享内容吸引潜在客户&#xff1…...

【Unity】使用Socket建立客户端和服务端并进行通信的例子

Socket服务端: using System; using System.Collections.Generic; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; public class SocketServer { public static Socket listenSocket;//监听Socket public static List<Socket>…...

为什么要学习《易经》?

《易经》精华解读&#xff1a;变易之道与人生智慧 《易经》&#xff08;《周易》&#xff09;是中国最古老的经典之一&#xff0c;被誉为“群经之首&#xff0c;大道之源”。它不仅是占卜之书&#xff0c;更是一部哲学经典&#xff0c;揭示了宇宙运行的规律和人生处世的智慧。…...

13.继承、重载、重写、多态、抽象类、接口、final、Static的学习

一、继承 继承&#xff1a;你继承谁你就是谁&#xff0c;继承是一种严格的父子关系 &#xff08;在父类里面抽取的属性和方法一定是所有子类所共有&#xff09; &#xff08;Student继承Person&#xff0c;那么Student就是人&#xff09; UML: 类图&#xff08;描述类和类之间的…...

SpringBoot Actuator未授权访问漏洞的全面解析与解决方案

引言 SpringBoot Actuator 作为应用监控与管理的核心组件,为开发者提供了丰富的系统自省和运维能力。然而,其默认配置中可能存在的未授权访问漏洞,已成为企业安全防护的潜在风险。本文将从漏洞原理、影响范围、检测方法到解决方案,系统性地剖析该问题,并提供覆盖开发、运维…...

使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(1)

背景 用户在WEB页面上点击按钮&#xff0c;服务端需要执行一系列操作&#xff0c;该操作系列步骤较多且耗时长&#xff0c;为了更好的给用户浏览体验&#xff0c;需要在每进行一个步骤由服务端推送消息给客户端&#xff08;浏览器&#xff09;&#xff0c;避免一个长时间的操作…...

一网统管建设组织保障分工常见表

在 “一网统管” 建设进程中,强有力的组织保障体系与各业务部门间的紧密分工协作是确保建设成效的关键。 从组织保障层面来看,需建立专门的 “一网统管” 建设领导小组,由政府高层领导担任组长,各关键业务部门负责人作为组员,以此强化对整体建设工作的统筹规划与组…...

JVM | CMS垃圾收集器详解

目录 CMS垃圾回收器简介 为什么CMS图中初始标记的阶段是单线程&#xff1f;为啥不多线程&#xff1f;当然现在默认多线程了。 CMS的两种模式与一种特殊策略 Backgroud CMS 记忆集 卡表 ForeGroud CMS CMS的标记压缩算法 三色标记 &#xff08;便于理解而被后人提出&am…...

android开发中的多线程、数据存储同步功能实现方案和应用场景

在Android开发中&#xff0c;多线程、数据存储与同步功能有多种实现方案&#xff0c;以下是详细介绍及其应用场景&#xff1a; 多线程 实现方案&#xff1a; Thread类与Runnable接口&#xff1a;通过继承Thread类并重写run方法&#xff0c;或实现Runnable接口并将其传入Threa…...

【C++初阶】--- 模板进阶

1.非类型模板参数 • 模板参数分类类型形参与非类型形参。 • 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。 • 非类型形参&#xff0c;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中可将该参…...

数据库所有知识

# 第一章 数据库-理论基础 ## 1.1 什么是数据库 数据&#xff1a; 描述事物的符号记录&#xff0c; 可以是数字、 文字、图形、图像、声音、语言等&#xff0c;数据有多种形式&#xff0c;它们都可以经过数字化后存入计算机。 数据库&#xff1a; 存储数据的仓库&#xff0c…...

docker部署的Nextcloud,处于维护模式,如何解决

Nextcloud 在升级后卡在维护模式&#xff0c;以下是针对 Docker 部署的解决方案&#xff1a; 1. 通过 OCC 命令强制关闭维护模式 进入 Nextcloud 容器内部执行命令&#xff1a; # 替换 nextcloud 为你的容器名称 docker exec -it --user www-data nextcloud php occ maintena…...

mongoose插入文档,字段类型, 字段验证, 删除文档,更新文档,读取文档,查询文档的条件控制 ,字段筛选,数据排序,数据截取

、Mongoose 中与 文档操作&#xff08;插入、查询、更新、删除&#xff09;及其相关功能&#xff08;字段类型、验证、条件筛选、排序、分页等&#xff09;相关示例&#xff1a; &#x1f4cb; 一、字段类型定义&#xff08;Schema Types&#xff09; const mongoose require…...

源码编译安装LAMP

一&#xff1a;LAMP概述 LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务及其应用开发环境。LAMP是一个缩写词&#xff0c;具体包括Linux操作系统、Apache网站服务器、MySQL数据库服务器、PHP…...

C++每日训练 Day 18:构建响应式表单与数据验证(初学者友好)

&#x1f4d8; 本篇目标&#xff1a;在前几日协程与事件驱动机制基础上&#xff0c;构建一个响应式表单系统&#xff0c;实现用户输入的异步验证与反馈。通过协程挂起/恢复机制&#xff0c;简化异步逻辑&#xff0c;提升代码可读性。 &#x1f501; 回顾 Day 17&#xff1a;响应…...

Linux环境变量以及进程虚拟地址原理

目录 一、介绍进程优先级 1.什么是优先级 2.为什么会有优先级 3.Linux中的优先级是怎么确定的 1&#xff09;查看Linux中的优先级 2&#xff09;计算优先级和更改优先级 二、环境变量 1.什么是环境变量 2.环境变量有什么作用 3.环境变量怎么做到的 1&#xff09;查看系统已有的…...

基于非递归求解的汉诺塔超级计算机堆栈与数据区设计方案

基于非递归求解的汉诺塔超级计算机堆栈与数据区设计方案 一、设计背景与目标 汉诺塔问题存在非递归直接求解方法&#xff0c;相较于递归法具有明确移动规律和潜在性能优势。本设计旨在利用非递归求解规律&#xff0c;优化汉诺塔超级计算机的堆栈与数据区结构&#xff0c;降低…...

【Linux应用】在PC的Linux环境下通过chroot运行ARM虚拟机镜像img文件(需要依赖qemu-aarch64、不需要重新安装iso)

【Linux应用】在PC的Linux环境下通过chroot运行ARM虚拟机镜像img文件&#xff08;需要依赖qemu-aarch64、不需要重新安装iso&#xff09; qemu提供了运行ARM虚拟机的方法 具体的操作方式就是建立一个硬盘img 然后通过iso安装到img 最后再运行img即可 这种方式教程很多 很简单 …...