【面试题-Vue】常见问题一、指令类
admin
2024-01-29 04:06:23
0

一、常用到的指令有哪些?

v-html、v-text、v-show、v-if、v-else、v-else-if、v-for、v-bind、v-on、v-model等等。

不常用的指令
v-pre 令vue语法失效
v-once 元素只渲染一次

二、v- show 与 v - if 有什么区别?

v - if:真正意义上的条件渲染,对dom树发生改变。为true是渲染(dom存在),为false时不存在(dom不存在)。
v-show:是通过控制display属性来进行dom的显示与隐藏

性能区别:
1、v-if有更高的切换开销,v-show有更高的初始渲染开销。
如果需要频繁的切换,使用v-show比较好,如果运行条件很少改变,使用v-if比较好。
2、v-show比v-if性能更高,因为v-show只能动态的改变样式,不需要增删DOM元素。所以当程序不是很大时候,v-if和v-show区别都不大,如果项目很大,推荐多用v-show,较少浏览器后期操作的性能。
3、需要多种条件场景,比如id=1,=2,=3…时候,因为只有v-if,可以和v-else等连用,这种比较适合用v-if。
4、v-show不支持语法。
5、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等,v-show只会初始化渲染时候执行,再切换时候不会执行生命后期的过程

三、v- for 中 key 是否为必须?以及它的作用?

必须的。
使用v-for循环一个list,当list发生更新时,v-for默认使用 就地更新策略进行渲染,即根据 key 值去判断某个数据是否修改,如果修改了就重新渲染,不然就复用之前的元素。
方案一:使用index作为key,不推荐
1.在list最后添加一条数据,此时用 index 作为 key,没有任何问题,
2.在list中间插入一条数据,此时用 index 作为 key,很多条数据的index会发生改变,因此v-for会渲染多条数据,降低效率,因此不推荐的。
方案二:使用id(list数据中具有唯一性的值)作为key,推荐
多数情况只会渲染一条数据,相比之下效率更高一些。

四、谈一下v-for和v-if的优先级

在源码中,v-for优先与v-if被解析,也就是说v-for优先级更高

常遇到的问题:
同时使用两者是,每次v-for循环,都会执行一次v-if,假设有个容量为1000的数组,那么v-if会被执行1000次,会十分消耗性能,降低代码质量。

怎么处理这种问题?这要根据判断调试是否和循环的内容有关系,分为两种情况:
1.在v-if不依赖v-for中某个值的前提下:可以在循环的外层添加template标签,在template中做v-if判断,这样可以让v-if的判断优先。

   ...isShowList:true,list: [{ id: 0, name: '张三' },{ id: 1, name: '李四' },{ id: 2, name: '王五' }]...

2.当v-if的判断条件依赖于v-for的内容时:可以在computed计算属性里先做好判断,过滤出符合条件的元素重新组成新的数组,在dom中循环这个新的数组。这样就不需要加v-if判断了。要知道,在computed里过滤的成本远比v-if低的多。

    
{{item.name}}
...list: [{ id: 0, name: '张三', isShow: true },{ id: 1, name: '李四', isShow: false },{ id: 2, name: '王五', isShow: true }]...computed: {newlist() {return this.list.filter(v => v.isShow)}},...

相关内容

热门资讯

【MySQL】锁 锁 文章目录锁全局锁表级锁表锁元数据锁(MDL)意向锁AUTO-INC锁...
【内网安全】 隧道搭建穿透上线... 文章目录内网穿透-Ngrok-入门-上线1、服务端配置:2、客户端连接服务端ÿ...
GCN的几种模型复现笔记 引言 本篇笔记紧接上文,主要是上一篇看写了快2w字,再去接入代码感觉有点...
数据分页展示逻辑 import java.util.Arrays;import java.util.List;impo...
Redis为什么选择单线程?R... 目录专栏导读一、Redis版本迭代二、Redis4.0之前为什么一直采用单线程?三、R...
【已解决】ERROR: Cou... 正确指令: pip install pyyaml
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
Lock 接口解读 前置知识点Synchronized synchronized 是 Java 中的关键字,...
Win7 专业版安装中文包、汉... 参考资料:http://www.metsky.com/archives/350.htm...
3 ROS1通讯编程提高(1) 3 ROS1通讯编程提高3.1 使用VS Code编译ROS13.1.1 VS Code的安装和配置...
大模型未来趋势 大模型是人工智能领域的重要发展趋势之一,未来有着广阔的应用前景和发展空间。以下是大模型未来的趋势和展...
python实战应用讲解-【n... 目录 如何在Python中计算残余的平方和 方法1:使用其Base公式 方法2:使用statsmod...
学习u-boot 需要了解的m... 一、常用函数 1. origin 函数 origin 函数的返回值就是变量来源。使用格式如下...
常用python爬虫库介绍与简... 通用 urllib -网络库(stdlib)。 requests -网络库。 grab – 网络库&...
药品批准文号查询|药融云-中国... 药品批文是国家食品药品监督管理局(NMPA)对药品的审评和批准的证明文件...
【2023-03-22】SRS... 【2023-03-22】SRS推流搭配FFmpeg实现目标检测 说明: 外侧测试使用SRS播放器测...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
初级算法-哈希表 主要记录算法和数据结构学习笔记,新的一年更上一层楼! 初级算法-哈希表...
进程间通信【Linux】 1. 进程间通信 1.1 什么是进程间通信 在 Linux 系统中,进程间通信...
【Docker】P3 Dock... Docker数据卷、宿主机与挂载数据卷的概念及作用挂载宿主机配置数据卷挂载操作示例一个容器挂载多个目...