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

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...