首页 > 其他分享 >VUE知识体系、VUE面试题

VUE知识体系、VUE面试题

时间:2024-04-27 16:22:37浏览次数:30  
标签:面试题 VUE show dom 知识 生成 渲染 vnode 属性

1. computed(计算属性)和方法有什么区别?

计算属性本质上是包含 getter 和 setter 的方法

当获取计算属性时,实际上是在调用计算属性的 getter 方法。vue 会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。

方法没有缓存,每次调用方法都会导致重新执行。

计算属性的 getter 和 setter 参数固定,getter 没有参数,setter 只有一个参数。而方法的参数不限。

由于有以上的这些区别,因此计算属性通常是根据已有数据得到其它数据,并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。

实际上,它们最重要的区别是含义上的区别。计算属性含义上也是一个属性(data 属性),可以读取也可以赋值;方法含义上是一个操作,用于处理一些事情。

 

2. v-if和v-show有什么区别?

v-if 能够控制是否生成 vnode(虚拟dom树),也就间接控制了是否生成对应dom。当 v-if 为 true 时,会生成对应 vnode,并生成对应的 dom 元素;当其为 false 时,不会生成对应 vnode,自然不会生成任何 dom 元素。v-if 是组件真正的渲染和销毁,而不是显示和隐藏

v-show 始终会生成 vnode,也就间接导致了始终生成 dom。它只是控制 dom 的 display 属性,当 v-show为 true 时,不做任何处理;当其为 false 时,生成的 dom 的 dispaly 属性为 none。v-show 是 CSS display 控制显示和隐藏

使用 v-if 可以有效的减少树的节点和渲染量,但也会导致树的不稳定;而使用 v-show 可以保持树的稳定,但不能减少树的节点和渲染量。

vue渲染节点越少效率越高,树越稳定效率越高。v-if节点少但树不稳定,v-show节点多但树稳定。

因此,在实际开发中,显示状态变化频繁的情况下应使用 v-show,以保持树的稳定;显示状态变化少时应该使用 v-if,以减少树的节点和渲染量。

 

3. 为何 v-for 要用 key

必须要用 key, 而且不能用 index 和 random,

key 是 vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确,更快速

在 diff 算法中用 tag 和 key 来判断,是否是 sameNode

可以减少渲染次数,提高渲染性能

 

标签:面试题,VUE,show,dom,知识,生成,渲染,vnode,属性
From: https://www.cnblogs.com/Scholars/p/18162191

相关文章

  • 数学知识(三)
    一、高斯消元高斯消元高斯消元是用来求解多元线性方程组的方法,时间复杂度为O(n3)。初等行列变换把某一行乘以一个非0的数交换某两行将某行的若干倍加到零一行【1】处理后形成阶梯型则有解【2】不是阶梯型左边均为0,右边非0,无解左右均为0,有解算法步骤枚举每一列寻找绝......
  • 计算机Windows系统优化小知识
    目录目录什么是注册表优化优化工具什么是注册表注册表是保存所有系统设置数据的存储器。注册表保存了Windows运行所需的各种参数和设置,以及应用程序相关的所有信息。从Windows启动开始,到用户登录、应用程序运行等所有操作都需要以注册表中记录的信息为基础。注册表在Windows操......
  • 一键启动的AI离线知识库,无需复杂环境依赖,小白都能上手了
    简介在人工智能技术飞速发展的今天,我们经常面临一个挑战:如何快速、简便地部署和使用AI技术?AntSK项目,一个开源的AI知识库和智能体,就是为了解决这一问题而诞生的。现在,我们自豪地宣布,AntSK已经实现了无需复杂部署的一键启动功能,让每个人都能轻松拥抱AI的便利。为什么选择AntSK?......
  • pwn知识——劫持tcache_perthread_struct(Ubuntu22.04之前)
    前言(可忽略)堆不愧是堆...知识点真的要多用动调查看堆的状态才好理解tcache_perthread_struct的结构源码#defineTCACHE_MAX_BINS64/*Weoverlaythisstructureontheuser-dataportionofachunkwhenthechunkisstoredintheper-threadcache.*/typedefst......
  • vue,js直接导出excel,xlsx的方法,XLSX_STYLE 行高设置失效的问题解决
    1、先安装依赖:xlsx、xlsx-style、file-saver三个包npminstallxlsxxlsx-stylefile-saver2、引入:<script>import*asXLSXfrom'xlsx/xlsx.mjs'importXLSX_STYLEfrom'xlsx-style';import{saveAs}from'file-saver';exportdefau......
  • Vue中form表单常用rules校验规则
    是否合法IP地址constcheckIPCode=(rule,value,callback)=>{ if(/^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/ .test(value......
  • 【知识点】欧几里得算法求最大公约数
    最大公约数所为的最大公约数,是指两个或多个整数共有的约数中最大的那个数。换句话说,它是能同时整除给定的整数的最大整数。例如,对于整数\(12\)和\(18\),它们的公约数有\(1、2、3、6\),其中最大的公约数为6,因此它们的最大公约数为\(6\)。最大公约数通常用符号\(\gcd(a,b)\)......
  • redis面试题
    redis面试题Redis是什么,应用场景:Redis是一种开源、内存中的数据存储系统,也被称为数据结构服务器。它支持多种数据结构(如字符串、哈希、列表、集合、有序集合、Bitmaps、HyperLogLogs等),并提供持久化、复制、事务、Lua脚本等功能。Redis常用于缓存、实时排行榜、计数器、消息队列......
  • vue箭头函数、js-for循环、事件修饰符、摁键事件和修饰符、表单控制、完整购物车版本
    【箭头函数】1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</title>6<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&l......
  • vue3 快速入门系列 —— 状态管理 pinia
    其他章节请看:vue3快速入门系列Piniavue3状态管理这里选择pinia。虽然vuex4已支持Vue3的CompositionAPI,但是vue3官网推荐新的应用使用pinia——vue3pinia集中式状态管理redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。Pinia符......