前端 vue 面试题(二)

文章目录

    • 如何让vue页面重新渲染
    • 组件间通信
    • vue为什么要mutation、 action操作
    • 插槽、具名插槽、作用域插槽
    • vue编译使用的是什么库？
    • vue怎么实现treeshaking
      • webpack实现treeshaking
      • 为什么只有es module 能支持 tree shaking
    • mixin 的作用
    • mixin的底层原理
    • nexTick原理
    • vuex和redux的差异

在这里插入图片描述

如何让vue页面重新渲染

在Vue中，可以使用以下几种方式让页面重新渲染：

改变数据状态：Vue中的响应式系统会自动监听数据的变化，并更新相应的视图。因此，可以通过修改数据状态来触发页面重新渲染。

强制重新渲染：可以通过调用组件实例的 $forceUpdate() 方法来强制重新渲染组件。这个方法会跳过依赖跟踪，直接重新渲染组件。但是，这种方法并不推荐使用，因为它会影响性能。

通过重新挂载组件实现：可以通过销毁组件实例，然后再创建一个新的组件实例来实现页面的重新渲染。在Vue中，可以通过调用组件实例的 $destroy() 方法来销毁组件实例。然后再通过调用$mount()方法来创建一个新的组件实例。这种方法可以完全重新渲染组件，但是也会带来一些性能开销。

组件间通信

1、父子组件传值，父组件传给子组件：通过props方法传递数据；子组件传给父组件：$emit方法传递参数。
2、非父子组件间的数据传递，兄弟组件传值eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

3、$refs获取子组件实例
4、vuex存放公共数据
5、$parent 和 $children

vue为什么要mutation、 action操作

mutation是用来直接修改store中的状态的方法，它只能进行同步操作，也就是说不能进行异步操作。而action则是用来提交mutation的方法，它可以进行异步操作，比如发起一个网络请求等。当action执行时，它可以在操作完成之后再调用一个mutation来修改store中的状态。

插槽、具名插槽、作用域插槽

默认插槽：父组件向子组件传递内容模板的机制，作为占位符，用于标识父组件提供的内容应该在哪里被渲染
具名插槽：子组件需要在不同的位置接收不同的内容，使用具名插槽以便在子组件中将内容分法到正确的位置，父组件 <template v-slot:name>，子组件<slot name="name">
作用域插槽：将子组件数据传递给父组件，<slot :data="data">
父组件
<child-component v-slot:default="slotProps">{{ slotProps.data }} </child-component>
更多类容请查看 https://blog.csdn.net/glorydx/article/details/102918914

vue编译使用的是什么库？

Vue.js使用一个名为"Vue Loader"的库进行组件的编译。Vue Loader 是一个官方支持的 webpack loader，用于将 Vue 单文件组件（.vue 文件）转换为 JavaScript 模块。

Vue Loader的主要功能包括：

  1. 解析单文件组件： Vue Loader可以解析.vue文件，提取其中的模板、脚本和样式块。

  2. 预处理器支持： Vue Loader支持多种预处理器，如Babel、TypeScript、Less、Sass等。这使得在Vue组件中使用这些预处理器语言变得非常方便。

  3. 热重载： Vue Loader集成了热重载功能，可以在开发环境中实现对组件的实时更新，而不需要刷新整个页面。

  4. 模块热替换（HMR）： Vue Loader通过webpack的模块热替换功能，支持在开发过程中快速替换或添加组件而不需要刷新整个页面。

vue怎么实现treeshaking

vue2的脚手架vue-cli使用的是webpack作为打包工具，webpack在2.0版本以后就已经支持treeshaking。
treeshaking只支持es module 规范的代码

// Bad: CommonJS
const myModule = require('./myModule');

// Good: ES2015 Modules
import myModule from './myModule';

webpack实现treeshaking

配置 Babel： 如果你使用了 Babel 来转译你的代码，确保在 Babel 的配置文件（如.babelrc）中启用 modules 选项，并设置为 false，以保留 ES2015 模块的格式。

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

使用生产环境模式： 在Webpack的配置中，确保你在生产环境中使用了 mode: ‘production’。这将启用Webpack的一些优化，包括对 Tree Shaking 的支持。

// webpack.config.js
module.exports = {
  mode: 'production',
  // other configurations...
};

检查 UglifyJS 配置： 如果你使用 UglifyJS 进行代码压缩，确保其配置中启用了 uglifyOptions.compress 中的 pure_getters 选项。

// webpack.config.js
module.exports = {
  // other configurations...
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: { pure_getters: true }
        }
      })
    ]
  }
};

vue使用的webpack作为打包工具，因此vue在生产环境下也是默认支持tree shaking的，不需要额外的手动配置。

为什么只有es module 能支持 tree shaking

treeshaking的本质是找到代码之间的依赖关系，这样才能判断哪些代码虽然被创建，却没有使用，哪些代码虽然被引入，也未被使用。因此，一定要满足在编译时就能构建依赖关系的条件。

编译时静态分析： ESM 是在编译时进行静态分析的，这意味着模块的依赖关系在代码执行之前就已经确定。

运行时动态加载： CommonJS 是在运行时动态加载的，模块的依赖关系在代码执行时才解析(打包完成后才执行代码，treeshaking还在打包之前)。

mixin 的作用

Mixin 是一种软件设计模式，通常用于在类之间共享方法或行为。Mixin 允许将一个类的方法添加到另一个类中，从而在不使用继承的情况下实现代码复用。

代码复用： Mixin 提供了一种在类之间共享代码的方式，避免了复制粘贴代码的问题。通过将共享的方法封装在 Mixin 中，可以轻松地在多个类中重复使用。

解耦： Mixin 允许将功能模块化，从而降低了类之间的耦合度。这使得代码更容易维护和理解，因为每个类只需关注自己的核心功能，而不必处理所有可能的变体。

单一职责原则： Mixin 可以帮助遵循单一职责原则，因为每个 Mixin 可以专注于一个特定的功能或行为。这有助于保持代码的清晰性和可维护性。

mixin的底层原理

const LoggerMixin = (target) => ({
  ...target,
  log(message) {
    console.log(message);
  }
});

class Dog {
  bark() {
    console.log('Woof!');
  }
}

const myDog = LoggerMixin(new Dog());

myDog.bark(); // 输出: Woof!
myDog.log('Hello'); // 输出: Hello

mixin的本质是对象的深度拷，然后注入到各个组件实例中去。各个组件的实例一旦被注入mixin之后，这些mixin就实例化一个个对象，这些对象之间的数据都是独立的，不像vuex那样，共享数据，一个组件改变状态，另外的组件也会自动更新。mixin只提供数据的初始值，和通用方法的封装，这些数据和方法，只在本组件实例生效。

nexTick原理

vue更新数据是同步的，但更新dom却是异步的，属于宏任务。按照js事件循环，nextTick属于微任务，但微任务却是在更新dom这个宏任务执行后的回调去触发nextTick的执行，每一次一个宏任务执行完，都会立即清空微任务队列。所以nextTick能够立即执行回调。

vuex和redux的差异

Vuex 和 Redux 都是用于管理应用状态（state）的状态管理库，但它们有一些设计和实现上的差异。下面是一些主要的区别：

  1. 框架/库的关联：

    • Vuex 是为 Vue.js 框架设计的状态管理库。它与 Vue.js 高度集成，使得在 Vue 应用中管理状态变得更加简单。
    • Redux 是一个独立的状态管理库，可以与多种 JavaScript 库和框架一起使用，包括 React、Angular 和 Vue 等。

  2. 概念的不同：

    • Vuex 强调在应用中的组件之间共享状态的方式，使用了类似于 Flux 架构的概念，包括 state、getters、mutations、actions。
    • Redux 强调单一不可变的状态树，状态只能通过纯函数（reducers）来修改。Redux 的设计理念受到了函数式编程的影响。

  3. 状态的修改：

    • 在 Vuex 中，通过提交 mutations 来修改状态。Mutations 是同步的，它们用于执行实际的状态修改。
    • 在 Redux 中，通过派发 actions 来修改状态。Actions 是可以是异步的，它们通过纯函数的 reducers 来处理状态的变化。

  4. 异步操作的处理：

    • Vuex 使用 actions 处理异步操作。Actions 可以包含异步逻辑，然后通过提交 mutations 来修改状态。
    • Redux 使用中间件来处理异步操作。Redux 中最常用的中间件是 redux-thunk，它允许 action creators 返回一个函数，而不仅仅是一个普通的 action 对象。

  5. 开发工具：

    • Vuex 提供了 Vue Devtools，可以很容易地在浏览器中监控和调试 Vuex 应用。
    • Redux 也有强大的开发者工具，例如 Redux DevTools，可以用于监控和调试 Redux 应用。
      在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/182453.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

小辰的智慧树（差分+前缀和）

小辰的智慧树（差分+前缀和）

登录—专业IT笔试面试备考平台_牛客网 1.考虑总长度之和不能超过m&#xff0c;2考虑限制每棵树高度不能低于ci&#xff0c;如果用二分最短输能截到的高度&#xff0c;还要另外去判断&#xff0c;是否每棵树mid都能严格大于ci &#xff0c;这样容易超时&#xff0c;换个角度&…
阅读更多...
14 redis全量复制与部分复制

14 redis全量复制与部分复制

1、设置主服务器的地址和端口 首先是在从服务器设置需要同步的主服务器信息&#xff0c;包括机器IP, 端口。 主从复制的开启&#xff0c;完全是在从节点发起的。不需要我们在主节点做任何事情。 从节点开启主从复制&#xff0c;有3种方式 配置文件&#xff1a;在从服务器的配…
阅读更多...
使用【画图】软件修改图片像素、比例和大小

使用【画图】软件修改图片像素、比例和大小

打开电脑画图软件&#xff0c;点击开始 windows附件 画图 在画图软件里选择需要调整的照片&#xff0c;点击文件 打开 在弹出窗口中选择照片后点击打开 照片在画图软件中打开后&#xff0c;对照片进行调整。按图中顺序进行 确定后照片会根据设定的值自动调整 保存…
阅读更多...
P6 C++控制流语句(continue, break, return)

P6 C++控制流语句(continue, break, return)

前言 今天我们讲的是控制流语句&#xff0c;本期内容是上期课程的延续。 控制流语句一般与循环语句一起工作&#xff0c;它们让我们可以更好的控制这些循环的实际运行。 我们有三个主要的控制流语句可以使用&#xff0c;continue 、break 和 return&#xff0c;它们有不同的…
阅读更多...
CCFCSP试题编号：201803-2试题名称：碰撞的小球

CCFCSP试题编号：201803-2试题名称：碰撞的小球

一、题目描述 二、思路 1.首先妾身分析这个题目&#xff0c;想要解题&#xff0c;得得解决2个问题。 1&#xff09;判断小球到达端点或碰撞然后改变方向&#xff1b; 2&#xff09;每时刻都要改变位置 两个问题都比较好解决&#xff0c;1&#xff09;只要简单判断坐标&…
阅读更多...
【Vue】核心特性（响应式）

【Vue】核心特性（响应式）

响应式&#xff1a; 数据变化&#xff0c;视图自动更新 接下来使用一个例子来体现一下什么是响应式 案例一&#xff1a; 访问数据&#xff0c;视图自动更新 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…
阅读更多...
12个最佳WordPress投票插件

12个最佳WordPress投票插件

您是否正在为您的网站寻找WordPress投票插件&#xff1f; WordPress投票插件可让您轻松地在您的网站上进行民意调查&#xff0c;用户可以投票。这是在收集见解的同时建立用户参与度的有效策略。 在本文中&#xff0c;我们精心挑选了最好的WordPress投票插件&#xff0c;可帮助…
阅读更多...
【C/PTA】函数专项练习（四）

【C/PTA】函数专项练习（四）

本文结合PTA专项练习带领读者掌握函数&#xff0c;刷题为主注释为辅&#xff0c;在代码中理解思路&#xff0c;其它不做过多叙述。 目录 6-1 计算A[n]1/(1 A[n-1])6-2 递归实现顺序输出整数6-3 自然数的位数(递归版)6-4 分治法求解金块问题6-5 汉诺塔6-6 重复显示字符(递归版)…
阅读更多...
代码随想录算法训练营第五十二天|300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组

代码随想录算法训练营第五十二天|300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 300.最长递增子序列 class Solution: # 2516 ms, faster than 64.96%def lengthOfLIS(self, nums: List[int]) -> int:n len(nums)dp [1] * n…
阅读更多...
黑马点评-10实现用户点赞和点赞排行榜功能

黑马点评-10实现用户点赞和点赞排行榜功能

用户点赞功能 如果用户只要点赞一次就对数据库中blog表中的liked字段的值加1就会导致一个用户无限点赞 PutMapping("/like/{id}") public Result likeBlog(PathVariable("id") Long id) {// 修改点赞数量,update tb_blog set liked liked 1 where id …
阅读更多...
JavaScript编程基础 – 布尔值(Booleans)

JavaScript编程基础 – 布尔值(Booleans)

JavaScript编程基础 – 布尔值(Booleans) Javascript Programming Essentials – Booleans 一个JavaScript布尔值包含两个值中的一个&#xff0c;即 true 或者 false。 本文简要介绍JavaScript布尔值的具体应用&#xff0c;以及可能作为对象的布尔值等。 1. 布尔值(Booleans)…
阅读更多...
Py之PyPDF2：PyPDF2的简介、安装、使用方法之详细攻略

Py之PyPDF2：PyPDF2的简介、安装、使用方法之详细攻略

Py之PyPDF2&#xff1a;PyPDF2的简介、安装、使用方法之详细攻略 目录 PyPDF2的简介 PyPDF2的安装 PyPDF2的使用方法 1、基础用法 PyPDF2的简介 PyPDF2是一个免费的、开源的纯python PDF库&#xff0c;能够拆分、合并、裁剪和转换PDF文件的页面。它还可以为PDF文件添加自定…
阅读更多...
springcloud超市管理系统源码

springcloud超市管理系统源码

技术说明&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;idea&#xff0c;vscode springcloud springboot mybatis vue elementui mysql 功能介绍&#xff1a; 后台管理&#xff1a; 统计分析&#xff1a;查看用户&#xff0c;商品&#xff0c;销售数量&#xff1b;…
阅读更多...
JavaWeb——感谢尚硅谷官方文档

JavaWeb——感谢尚硅谷官方文档

JavaWeb——感谢尚硅谷官方文档 XML一、xml简介二、xml的语法1、文档申明2、xml注释3、xml元素4、xml属性5、xml语法规则 三、xml解析技术1、使用dom4j解析xml Tomcat一、JavaWeb的概念二、web资源的分类三、常见的web服务器四、Tomcat的使用1、安装2、Tomcat的目录介绍3 启动T…
阅读更多...
数据结构-leetcode(设计循环队列)

数据结构-leetcode(设计循环队列)

1.学习内容&#xff1a; 今天 我们讲解一道能够很好的总结所学队列知识的题目---设计循环队列 622. 设计循环队列 - 力扣&#xff08;LeetCode&#xff09; 2.题目描述&#xff1a; 让我们设计一个队列 要求是循环的 这和我们的双向链表有些类似 让我们按要求设计出这些相对…
阅读更多...
视频云存储EasyCVR平台国标接入获取通道设备未回复是什么原因？该如何解决？

视频云存储EasyCVR平台国标接入获取通道设备未回复是什么原因？该如何解决？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…
阅读更多...
Python中的解析器argparse

Python中的解析器argparse

import argparse## 构造解析器 argparse.ArgumentParser() parse argparse.ArgumentParser(description"caculateing the area of rectangle")## 添加参数 .add_argument() parse.add_argument("--length",typeint,default20,helpThe length of rectangle…
阅读更多...
西米支付：如何设计和构建游戏支付系统？

西米支付：如何设计和构建游戏支付系统？

如何设计和构建游戏支付系统&#xff1f; 目前&#xff0c;游戏开发中最常见的支付方式包括微信支付、支付宝支付和苹果支付等。今天&#xff0c;我将与大家分享游戏支付系统的架构和设计。 游戏支付的主要业务流程是指游戏玩家在游戏中购买虚拟物品或服务所进行的支付过程。一…
阅读更多...
深入了解Java8新特性-日期时间API_LocalDate类

深入了解Java8新特性-日期时间API_LocalDate类

阅读建议 嗨&#xff0c;伙计&#xff01;刷到这篇文章咱们就是有缘人&#xff0c;在阅读这篇文章前我有一些建议&#xff1a; 本篇文章大概12000多字&#xff0c;预计阅读时间长需要10分钟。本篇文章的实战性、理论性较强&#xff0c;是一篇质量分数较高的技术干货文章&…
阅读更多...
使用 PowerShell 中的命令来删除共享目录

使用 PowerShell 中的命令来删除共享目录

Remove-SmbShare -Name "ShareName" 请将 "ShareName" 替换为您要删除的实际共享目录的名称。 请注意&#xff0c;执行此命令需要具有适当的权限。确保您以管理员身份运行 PowerShell 或具有足够的权限来删除共享目录。
阅读更多...
最新文章

Copyright @ 2022~2023