面试 Vue 框架八股文十问十答第七期

面试 Vue 框架八股文十问十答第七期

作者:程序员小白条,个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)Vue template 到 render 的过程

在Vue中,template会被编译成一个render函数。整个过程包括以下步骤:

  • 模板编译: Vue通过模板编译器将template转换为渲染函数。
  • 生成AST(抽象语法树): 模板编译生成AST,表示模板的抽象语法结构。
  • 生成render函数: 将AST转换为render函数,该函数返回VNode(虚拟DOM)。
  • 渲染: 执行render函数,得到渲染的VNode。
  • 补丁: 将新的VNode与旧的VNode进行对比,计算出最小的更新,然后将差异更新到真实DOM上。

2)Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?

不一定。Vue使用响应式系统,当data中的某个属性发生改变时,Vue会触发视图更新。但实际的更新可能会受到一些因素的影响,比如DOM更新是异步的,Vue可能会在下一个事件循环中批量处理DOM更新,而不是立即同步执行。这种批量处理可以提高性能。

3)简述 mixin、extends 的覆盖逻辑

  • Mixin: Mixin是一种重用Vue组件选项的方式。当组件使用Mixin时,Mixin的选项会与组件的选项进行合并。如果存在命名冲突,以组件的选项为准,Mixin的选项会被覆盖。
  • Extends: Extends是一种通过基础组件扩展其他组件的方式。被扩展的组件可以访问基础组件的所有选项。如果有命名冲突,以扩展组件的选项为准,覆盖基础组件的选项。

4)描述下Vue自定义指令

Vue自定义指令是一种可以扩展Vue.js功能的灵活机制。自定义指令可以在DOM元素上添加特殊行为,比如改变样式、绑定事件等。自定义指令分为全局指令和局部指令。

  • 全局指令: 使用Vue.directive方法定义,可以在整个应用中使用。
  • 局部指令: 在组件的directives选项中定义,只在该组件中生效。

自定义指令包含一系列钩子函数,例如bindinsertedupdatecomponentUpdatedunbind等,用于处理指令的不同生命周期阶段。

5)子组件可以直接改变父组件的数据吗?

一般情况下,子组件不能直接改变父组件的数据。Vue的单向数据流原则要求子组件不能直接修改从父组件传递下来的props。如果需要修改父组件的数据,可以通过触发事件,由父组件捕获事件并修改数据。

父组件可以通过v-model实现双向绑定,允许子组件修改父组件通过v-model传递的数据。但仍然需要通过触发事件来实现双向绑定。

6)Vue是如何收集依赖的?

Vue使用响应式系统来实现数据的双向绑定,其中一个关键的部分是依赖收集。当一个数据被访问时,Vue会将当前组件的Watcher对象(观察者)添加到该数据的依赖列表中。当数据发生变化时,依赖列表的Watcher对象会收到通知,从而触发视图的更新。

Vue的依赖收集是通过gettersetter来实现的。当访问数据时,getter负责收集依赖,而当修改数据时,setter负责通知依赖进行更新。

7)对 React 和 Vue 的理解,它们的异同

  • 相似之处:
    • 都是用于构建用户界面的JavaScript框架/库。
    • 提供了组件化的开发方式。
    • 都支持虚拟DOM,通过差异化算法提高DOM更新效率。
    • 都有响应式系统,能够实现数据驱动的视图更新。
  • 不同之处:
    • 语法和模板: Vue使用模板语法,将HTML直接作为模板,而React使用JSX,将HTML嵌入JavaScript代码。
    • 数据绑定: Vue的双向数据绑定更直观,而React通常使用单向数据流。
    • 生态系统: React生态系统更庞大,有着更多的第三方库和工具。Vue生态系统相对轻量,但也越来越丰富。
    • 学习曲线: Vue通常被认为对初学者更友好,学习曲线相对较平滑。React的学习曲线可能会更陡峭一些。

8)Vue的优点

  • 简单易学: Vue的语法直观且易于理解,对初学者友好。
  • 灵活性: Vue提供了很好的灵活性,可以逐渐引入并使用,甚至可以只作为某一部分的解决方案。
  • 组件化开发: Vue鼓励组件化开发,使得代码更易维护、复用和测试。
  • 响应式数据绑定: Vue的响应式系统使得数据驱动视图变得简单,开发者无需手动操作DOM。
  • 生态系统: Vue的生态系统逐渐壮大,有大量的插件和工具可供选择。

9)assets和static的区别

  • assets: 存放需要经webpack处理的静态资源,如样式、图片等。这些资源在构建时会被webpack处理和打包。
  • static: 存放不经webpack处理的静态资源。这些资源会被直接复制到输出目录(如dist)下,不会经过webpack的处理。

简而言之,assets是需要webpack处理的静态资源,而static是不需要webpack处理的静态资源。

10)delete和Vue.delete删除数组的区别

  • JavaScript中的delete: delete是JavaScript语言中的操作符,用于删除对象的属性。但对于数组来说,使用delete删除元素后,数组的长度并不会发生变化,被删除的元素只是变为undefined。
  • Vue.delete: Vue.delete是Vue.js提供的方法,用于在响应式对象上删除属性,特别是在删除数组元素时,确保能触发视图更新,并保持响应式。使用Vue.delete删除数组元素后,数组会触发视图更新,并且数组的长度会相应减少。这是为了确保Vue能够监听到数据的变化并进行响应式更新。

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql运维篇(二) 主从复制

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人,如有侵权请留言,我及时删除。 一、主从复制的原理 主库会生成一个I/O操作线程进去写的的操作,而从库则生成两个线程,其一是I/O读取线程,其二是一个SQL线程。 1、主库将数据的操作记录到一个二进…

C++的流库

1.流的概念 “流”,即“流动”的意思,是物质从一处向另一处流动的过程。在计算机这边通常是指对一种有序连续且具有方向性的数据的抽象描述。 C 中的流一般指两个过程的统一: 信息从外部输入设备(键盘)向计算机内部…

【数据结构与算法】之字符串系列-20240121

这里写目录标题 一、344. 反转字符串二、125. 验证回文串三、205. 同构字符串四、242. 有效的字母异位词五、290. 单词规律 一、344. 反转字符串 简单 编写一个函数,其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额…

k8s集群加入一个master2--kubeadm方式

已经有一个集群: 192.168.206.138 master 192.168.206.136 k8s-node1 192.168.206.137 k8s-node2 kubectl get nodes -o wide 新加入一个master2节点 192.168.206.139 master2 一、初始化系统参数 139 master2 上 #在136、137、138上添加hosts“” echo "…

Java研学-MyBatis加强(二)

一 关系 1 应用 数据是存在关系的,将有关系的数据通过 MyBatis 持久化到数据库,且存储的数据也能表示出来这种关系,再由数据库中把有关系的数据查询出来在页面展示。 保存:页面数据 —> Java 对象封装 —> MyBatis —> …

贪心算法笔记

贪心 1.序列问题1.1摆动序列1.2单调递增的数字 2.多维度权衡2.1分发糖果2.2根据身高重构队列 3.区间问题3.1跳跃问题3.2跳跃问题 II3.3用最小数量的箭引爆气球3.4无重叠区间3.5划分字母区间3.6合并区间 4.其他4.1最大子数组和4.2加油站4.3监控二叉树 正如这个算法的名字一样&am…

【办公类-19-02】20240122图书EXCEL插入列并删除空行

作品展示 背景需求 上次23个班级班主任统计图书,写在EXCEL内 【办公类-19-01】20240108图书统计登记表制作(23个班级)EXCEL复制表格并合并表格-CSDN博客文章浏览阅读693次,点赞12次,收藏7次。【办公类-19-01】202401…

Unity 编辑器篇|(十三)自定义属性绘制器(PropertyDrawer ,PropertyAttribute) (全面总结 | 建议收藏)

目录 1. 前言2. PropertyDrawer2.1 参数总览2.2 两种用途2.3 注意事项2.4 代码样例 3. PropertyDrawer与PropertyAttribute结合使用 1. 前言 在Unity中,PropertyDrawer和PropertyAttribute是两个重要的工具,它们主要用于自定义属性的显示和行为。Proper…

如何查看其他电脑的MYSQL数据库 mysql查询另一个ip数据库

文章标签如何查看其他电脑的MYSQL数据库mysql数据库服务器MySQL文章分类MySQL数据库阅读数143 1.如何通过IP访问MySQL数据库 1.1 改表法1.2 授权法 2.MySQL数据库基本命令 2.1 基本命令2.2 注释2.3 关键字2.4 实践操作 3 小结 1.如何通过IP访问MySQL数据库 1.1 改表法 如…

三、安全工程—安全架构(CISSP)

目录 一、安全工程 1.企业安全架构与系统安全架构 2.通用企业架构框架 2.1 Zachman框架

【JS逆向学习】国家加密系列-SM算法实例

SM系列 1、国家加密算法介绍 事实上从 2010 年开始,我国国家密码管理局就已经开始陆续发布了一系列国产加密算法,其中SM1、SM4、SM7、祖冲之密码(ZUC)是对称算法;SM2、SM9是非对称算法;SM3是哈希算法。目…

Django框架二

一、模型层及ORM 1.模型层定义 负责跟数据库之间进行通信 2.Django配置mysql 安装mysqlclient,mysqlclient版本最好在13.13以上 pip3 install mysqlclient DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: "mysite1",USER:root,PASSWO…

pip安装之后还是无法使用问题处理

最近由于需要使用到Python 相关功能, 记录下一些入门小技巧 1 python 下载安装 在window10 环境下载免安装版本, 并解压 安装包下载地址: https://www.python.org/ftp/python/3.12.1/python-3.12.1-embed-amd64.zip 2. 安装pip, 由于是内嵌…

【立创EDA-PCB设计基础】5.布线设计规则设置

前言:本文详解布线前的设计规则设置。经过本专栏中的【立创EDA-PCB设计基础】前几节已经完成了布局,接下来开始进行布线,在布线之前,要设置设计规则。 目录 1.间距设置 1.1 安全间距设置 1.2 其它间距设置 2.物理设置 2.1 导…

Git生成公钥

一.配置本地用户名及邮箱 # 配置用户名 git config --global user.name "用户名" # 配置邮箱 git config --global user.email "邮箱地址"以上命令执行结束后,可用 git config --global --list 命令查看配置是否成功。 二.git生成公钥 在git…

力扣hot100 合并两个有序链表 递归 双指针

Problem: 21. 合并两个有序链表 文章目录 💖 递归思路 💖 双指针 💖 递归 思路 👨‍🏫 参考地址 n , m n,m n,m 分别为 list1 和 list2 的元素个数 ⏰ 时间复杂度: O ( n m ) O(nm) O(nm) 🌎 空间复杂…

是谁说网工这行是小众行业?我帮你搜了搜……

有人说网工这行是个小众行业,很多朋友在喊岗位不够多,我帮你搜了搜,其实招聘岗位的需求真的很多: 可能你换着搜索下关键词,善用不同类型的渠道,你会有新的惊喜。 能达到这要求的,这位朋友&#…

Halcon基于灰度值的模板匹配create_temple

Halcon基于灰度值的模板匹配 基于灰度值的模板匹配适用于图像内灰度变化比较稳定,噪声比较少,且灰度差异比较明显的检测目标。这是一种不太推的匹配方法,因为该方法复杂度高,一次只能检测一个目标,耗时,且…

线程池--JAVA

虽然线程是轻量级进程,但是如果当创建和销毁的的频率非常之高,那么它也就会消耗很多的资源。 而线程池就是用来优化线程频繁创建和销毁的场景,减少线程创建、销毁的频率。 ExecutorService JAVA标准库为我们实现了线程池,Execu…

华而有实,维乐Prevail Glide带你领略风景线,成为风景线~

大家都知道呢!骑行,不仅是一种运动,更是一种生活态度。在骑行装备的世界里,一个好的坐垫对于骑行的舒适度和安全性至关重要。那今天,我要为大家推荐一款备受赞誉的坐垫——维乐坐垫美学系列-Prevail Glide。    为…