VUE知识体系、VUE面试题

vue · 浏览次数 : 0

小编点评

1. **计算属性**和**方法**的主要区别在于计算属性的获取方式以及方法的执行机制。 * **计算属性**:通过 getter 和 setter 方法获取,并缓存其返回值。只有当依赖变化时才会重新计算。 * **方法**:直接执行,无缓存。每次调用方法都会导致重新执行。 2. **v-if** 和 **v-show** 的主要区别在于它们控制 DOM 的显示或隐藏。 * **v-if**:仅生成 vnode,并生成对应的 DOM 元素。当 v-if 为 false 时,不会生成任何 DOM 元素。 * **v-show**:生成 DOM 元素,但始终保持其 display 属性为 none。 3. **v-for** 的 **key** 属性的作用是唯一标识 vnode 的标记。通过 **key**,diff 操作可以更准确地判断两个 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知识体系、VUE面试题相似的内容:

VUE知识体系、VUE面试题

1. computed(计算属性)和方法有什么区别? 计算属性本质上是包含 getter 和 setter 的方法 当获取计算属性时,实际上是在调用计算属性的 getter 方法。vue 会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。 方法没有缓存,每次调用方法都

新知识get,vue3是如何实现在style中使用响应式变量?

前言 vue2的时候想必大家有遇到需要在style模块中访问script模块中的响应式变量,为此我们不得不使用css变量去实现。现在vue3已经内置了这个功能啦,可以在style中使用v-bind指令绑定script模块中的响应式变量,这篇文章我们来讲讲vue是如何实现在style中使用script

React 的 KeepAlive 探索

什么是 KeepAlive? 用过 Vue 的童鞋都知道 Vue 官方自带了 Keep-Alive 组件,它能够使组件在切换时仍能保留原有的状态信息,并且有专门的生命周期方便去做额外的处理。该组件在很多场景非常有用,比如: tabs 缓存页面 分步表单 路由缓存 我们先看看 Vue 中是如何使用的,

Vue vs React:你需要知道的一切

Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢?在本篇 Vue 与 React 的对比中,我们将尝试找出答案。我们将回顾每种工具的优缺点,提供选择使用哪种工具的技巧,并帮助你开始使用。 总览 什么是Vue? Vue趣事 什么是Re

推荐一款在浏览器编辑`Blazor`的`IDE`

不知道是否有Blazor用户羡慕过React或者Vue用户,在一些组件库中,它们就提供了在当前的组件预览对于组件的实时编辑并且预览? 比如semi-design的这种 在比如codepen这种 由于Blazor的诞生时间对比现有的前端来说太短了,以至于这种在线编译的基本没有, 有时候在写界面的时候调

有点儿神奇,原来vue3的setup语法糖中组件无需注册因为这个

前言 众所周知,在vue2的时候使用一个vue组件要么全局注册,要么局部注册。但是在setup语法糖中直接将组件import导入无需注册就可以使用,你知道这是为什么呢?注:本文中使用的vue版本为3.4.19。 关注公众号:【前端欧阳】,给自己一个进阶vue的机会 看个demo 我们先来看个简单的d

Blazor技术入门

曾写过点儿前后端分离的项目(Vue+.NET Core Web API)、WPF和WinForm。因为Blazor不支持小程序的原因(相对于uniapp),所以只是大概知道Blazor可以写Web、PC和移动端项目,最大的特点就是使用C#代替JS。本文算是通过几个默认例子入门Blazor技术吧。 一

JavaScript 如何实现一个响应式系统

JavaScript 如何实现一个响应式系统 第一阶段目标 数据变化重新运行依赖数据的过程 第一阶段问题 如何知道数据发生了变化 如何知道哪些过程依赖了哪些数据 第一阶段问题的解决方案 我们可用参考现有的响应式系统(vue) vue2 是通过 Object.defineProperty实现数据变化的

VUE系列之性能优化--懒加载

一、懒加载的基本概念 懒加载是一种按需加载技术,即在用户需要时才加载相应的资源,而不是在页面初始加载时一次性加载所有资源。这样可以减少页面初始加载的资源量,提高页面加载速度和用户体验。 二、Vue 中的懒加载 在 Vue.js 中,懒加载主要用于路由组件的按需加载。Vue Router 提供了非常便

深入理解 Vue 3 组件通信

在 Vue 3 中,组件通信是一个关键的概念,它允许我们在组件之间传递数据和事件。本文将介绍几种常见的 Vue 3 组件通信方法,包括 props、emits、provide 和 inject、事件总线以及 Vuex 状态管理。 1. 使用 props 和 emits 进行父子组件通信 props