当前位置: 首页 > 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…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

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

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

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理&#xff1a;检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目&#xff1a;RankRAG&#xff1a;Unifying Context Ranking…...

未授权访问事件频发,我们应当如何应对?

在当下&#xff0c;数据已成为企业和组织的核心资产&#xff0c;是推动业务发展、决策制定以及创新的关键驱动力。然而&#xff0c;未授权访问这一隐匿的安全威胁&#xff0c;正如同高悬的达摩克利斯之剑&#xff0c;时刻威胁着数据的安全&#xff0c;一旦触发&#xff0c;便可…...