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

vue2 面试题

一、.vue的性能优化怎么做?

1.编码优化:

  • 不要把所有的数据都放在data中;
  • v-for时给每个元素绑定事件用事件代理;
  • keep-alive缓存组件;
  • 尽可能拆分组件,提高复用性、维护性;
  • key值要保证唯一;
  • 合理使用路由懒加载,异步组件;
  • 数据持久化存储的使用尽量防抖、节流优化;

 2.加载优化:

  • 按需加载;
  • 内容懒加载;
  • 图片懒加载;       

3.用户体验:

  • 骨架屏 

4.SEO优化:

  • 预渲染;
  • 服务端渲染ssr; 

5.打包优化:

  •  CDN形式加载第三方模块;
  • 多线程打包;
  • 抽离公共文件;

6.缓存和压缩:

  • 客户端缓存、服务端缓存;
  • 服务端gzip压缩; 

 二、vue3和vue2有哪些区别?

1.双向数据绑定的原理不同;

2.是否支持碎片;

3.API不同;

4.定义数据变量方法不同;

5.生命周期的不同;

6.传值不同;

7.指令和插槽不同;

8.mian.js不同;

三、 vue中如何做强制刷新?

1.localtion.reload();

2.this.$router.go(0);

3.provide和inject;

四、vue的过滤器怎么使用?

用来对文本进行格式化处理,使用方式有两种,一个是插值表达式;一个是v-bind;

分为:

全局过滤器:

Vue.filter('add',function(v){return v < 10 ? '0'+v : v
})
<div>{{33 | add}}</div>

 局部过滤器:

和methods同级,

filter:{add:function(v){return v < 10 ? '0'+v : v}
}​

五、封装一个可复用的组件,需要满足什么条件?

1.低耦合,组件之间的依赖越小越好;

2.从父级传入信息,不要在公共组建中请求数据;

3.传入的数据要进行效验;

4.处理事件的方法写在父组件中;

六、如何封装一个组件?

1.使用Vue.extend()创建一个组件;

2.使用Vue.component()方法注册组件;

3.如果子组件需要数据,可以在props中接收定义;

4.子组件修改好数据,要把数据传递给父组件,可以用emit()方法;

原则:

        把功能拆开;

        尽量让组件原子化,一个组件做一件事情;

        容器组件管数据,展示组件管视图;

七、vuex的响应式处理?

vuex是vue的状态管理工具。

vue中可以直接触发methods中的方法,vuex是不可以的。处理异步,当触发事件的时候,会通过dispatch来访问actions中的方法,actions中的commit会触发mutations中的方法从而修改state里的值,通过getter把数据更新到视图。

Vue.use(vuex),调用Install方法,通过applyMixin(vue)在任意组件内执行this.$router就可以访问到store对象。

vuex的state是响应式的,借助的就是vue的data,把state存到vue实例组件的data中。

八、vue和jQuery的区别是什么?

1.原理不同:vue是数据绑定,jq先获取dom再处理;

2.着重点不同:vue是数据驱动,jq是着重于页面;

3.操作不同:vue进行了dom操作,我们只需关注数据即可,jq先获取dom对象,然后赋值,事件绑定等;

        

相关文章:

vue2 面试题

一、.vue的性能优化怎么做&#xff1f; 1.编码优化&#xff1a; 不要把所有的数据都放在data中&#xff1b;v-for时给每个元素绑定事件用事件代理&#xff1b;keep-alive缓存组件&#xff1b;尽可能拆分组件&#xff0c;提高复用性、维护性&#xff1b;key值要保证唯一&#…...

【JavaEE精炼宝库】多线程(3)线程安全 | synchronized

目录 一、线程安全 1.1 经典线程不安全案例&#xff1a; 1.2 线程安全的概念&#xff1a; 1.3 线程不安全的原因&#xff1a; 1.3.1 案例刨析: 1.3.2 线程不安全的名词解释&#xff1a; 1.3.3 Java 内存模型 (JMM)&#xff1a; 1.3.4 解决线程不安全问题&#xff1a; 二…...

el-table-column两种方法处理特殊字段,插槽和函数

问题&#xff1a;后端返回的字段为数字 解决办法&#xff1a; {{ row[item.prop] 1 ? "启用" : "禁用" }} {{ row[item.prop] }} 最终果&#xff1a; 另外&#xff1a;如果多种状态时可用函数 {{ getStatus(row[item.prop]) }} {{ row[item.prop…...

huggingface笔记: accelerate estimate-memory 命令

探索可用于某一机器的潜在模型时&#xff0c;了解模型的大小以及它是否适合当前显卡的内存是一个非常复杂的问题。为了缓解这个问题&#xff0c;Accelerate 提供了一个 命令行命令 accelerate estimate-memory。 accelerate estimate-memory {MODEL_NAME} --library_name {LIBR…...

李飞飞亲自撰文:大模型不存在主观感觉能力,多少亿参数都不行

近日&#xff0c;李飞飞连同斯坦福大学以人为本人工智能研究所 HAI 联合主任 John Etchemendy 教授联合撰写了一篇文章&#xff0c;文章对 AI 到底有没有感觉能力&#xff08;sentient&#xff09;进行了深入探讨。 「空间智能是人工智能拼图中的关键一环。」知名「AI 教母」李…...

超级好用的C++实用库之套接字

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 C中的Socket编程是实现网络通信的基础&#xff0c;允许程序通过网络与其他程序交换数据。…...

C++ | Leetcode C++题解之第108题将有序数组转换为二叉搜索树

题目&#xff1a; 题解&#xff1a; class Solution { public:TreeNode* sortedArrayToBST(vector<int>& nums) {return helper(nums, 0, nums.size() - 1);}TreeNode* helper(vector<int>& nums, int left, int right) {if (left > right) {return nu…...

5月27日,每日信息差

第一、韩国宇宙航空厅于 5 月 27 日正式成立&#xff0c;旨在推动以民间为主的太空产业生态圈发展&#xff0c;助力韩国成为航天强国。首任厅长尹宁彬表示&#xff0c;该机构将在庆尚南道泗川市的临时大楼开展相关工作。 第二、京东集团宣布&#xff0c;自2024年7月1日起&…...

echart扩展插件词云echarts-wordcloud

echart扩展插件词云echarts-wordcloud 一、效果图二、主要代码 一、效果图 二、主要代码 // 安装插件 npm i echarts-wordcloud -Simport * as echarts from echarts; import echarts-wordcloud; //下载插件echarts-wordcloud import wordcloudBg from /components/wordcloudB…...

解决无法直接抓取链接地址

当我们在爬取一些文章列表的时候&#xff0c;可能无法从接口或者html界面上获取到文章的详细列表 这个时候我们可以通过模拟点击且重写window.open方法&#xff0c;将跳转的地址捕获&#xff0c;并且放到html中去。 这样我们就可以获取到某个文章的详细地址了 // 保存原始的 …...

java面对对象编程-多态

介绍 方法的多态 多态是在继承&#xff0c;重载&#xff0c;重写的基础上实现的 我们可以看看这个代码 package b;public class main_ {public static void main(String[] args) { // graduate granew graduate(); // gra.cry();//这个时候&#xff0c;子类的cry方法就重写…...

【Sql Server】随机查询一条表记录,并重重温回顾下自定义函数的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…...

基于C#开发web网页管理系统模板流程-主界面管理员录入和编辑功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-登录界面和主界面_c#的网页编程-CSDN博客 已经完成了登录界面和主界面&#xff0c;本篇将完善主界面的管理员录入和编辑功能&#xff0c;事实上管理员录入和编辑的设计套路适用于所有静态表的录入和编辑 首先还是介绍一下…...

K8s证书过期处理

问题描述 本地有一个1master2worker的k8s集群&#xff0c;今天启动VMware虚拟机之后发现api-server没有起来&#xff0c;docker一直退出&#xff0c;这个集群是使用kubeadm安装的。 于是kubectl logs查看了日志&#xff0c;发现证书过期了 解决方案&#xff1a; 查看证书 #…...

刷题之路径总和Ⅲ(leetcode)

路径总和Ⅲ 这题和和《为K的数组》思路一致&#xff0c;也是用前缀表。 代码调试过&#xff0c;所以还加一部分用前序遍历数组和中序遍历数组构造二叉树的代码。 #include<vector> #include<unordered_map> #include<iostream> using namespace std; //Def…...

MongoDB 原子操作:确保数据一致性和完整性的关键

在 MongoDB 中&#xff0c;原子操作是指可以一次性、不可分割地执行的数据库操作。这些操作能够保证在多个并发操作中不会出现数据不一致或者丢失的情况&#xff0c;确保数据库的数据完整性和一致性。 基本语法 MongoDB 的原子操作通常与更新操作相关&#xff0c;其基本语法如…...

2024上半年软考高级系统架构设计师回顾

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/139238685 2024年上半年软考在5月25-26日举行&#xff0c;趁着时间刚过去记忆还在&#xff0c;简单写一点总结。 关于考试形式&#xff1a;上机考试&#xff08;以后也都是机考&#xff09;&#xff0…...

SQL注入绕过技术深度解析与防御策略

引言 在Web安全领域&#xff0c;SQL注入攻击一直是一个棘手的问题。攻击者通过SQL注入手段获取敏感数据、执行恶意操作&#xff0c;甚至完全控制系统。尽管许多防御措施已被广泛采用&#xff0c;但攻击者仍不断开发新的绕过技术。本文将深度解析SQL注入的绕过技术&#xff0c;…...

Redis教程(十六):Redis的缓存穿透、缓存击穿、缓存雪崩

传送门&#xff1a;Redis教程汇总篇&#xff0c;让你从入门到精通 缓存穿透 描述 用户需要查询一个数据&#xff0c;例如要查一张ASSET_CODE 999999的卡片&#xff0c;查询redis中没有&#xff0c;就直接去请求数据库&#xff0c;数据库中也不存在对应的数据&#xff0c;返回…...

如何实现一个高效的单向链表逆序输出?

实现单向链表逆序输出的关键点有两个: 反转链表本身 遍历反转后的链表并输出首先,我们来看如何反转链表: class Node:def __init__(self, data):self.data dataself.next Nonedef reverse_list(head):"""反转单向链表"""prev Nonecurrent h…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...