Vue 面试常见知识点总结
原理篇
一、Vue 响应式原理
- Vue2 中,是通过 ES5 中的
defineProperty
api 来对对象的属性进行 get 和 set 操作的拦截,在进行拦截操作时还创建了一个 watcher 用来跟踪对应的 value 的变化,因为这种方式无法对数组进行拦截,所以在 vue 中,要实现数组的响应式,需要调用其内置的 $set 方法(需要了解 $set 的用法),defineProperty 是一个无法 polyfill 的api,所以 vue 不支持 IE8 以下的版本 - Vue3 使用ES6 的
Proxy
内置对象完全改了响应式的底层实现,但原理都是类似地,(为对象属性添加拦截器和侦听器),Proxy 能更高效地对对象添加自定义操作,同时也支持了对数组的代理。不过也有问题,就是 Proxy 不支持对原始类型数据的代理,所以在 vue3 中,为实现原始类型数据的响应,对原始数据类型进行了对象化包装。同样地,Proxy 也是一个无法被 polyfill 的 api,所以 vue3 不支持 IE11 以下的版本
二、v-model
的实现原理
v-model 是通过表单元素的 change/input
事件,然后在事件触发时,发送一个 自定义的 update 事件,并将原始事件对象中的 value 当作参数发送出去,然后更新到 v-model
绑定的值上
应用(APP)篇
三、组件的生命周期
Vue 2
beforeCreated => created => beforeMount => mounted => beforeDestroy => destroyed
如果组件发生了更新,还会触发以下生命周期钩子
beforeUpdate => updated
如果使用了 keep-alive
,则会额外增加两个生命周期: actived, deactived
Vue 3
Vue 3 新增了组合式 API,不过 Vue 2 中的 Option API 也可以继续使用,要使用组合式 API,需要使用 setup
方法或者 <script setup>
语法糖
在组合式 API 中,beforeCreated 和 created 直接整合到了 setup 方法,其他的采用了 on + 生命周期名称形式的方法钩子函数,其中 destroy相关的钩子都改成了 unmounted / beforeUnmount
选项式 API 生命周期
Vue2.x | Vue3.x | Composition API |
---|---|---|
beforeCreate | – (代表无变化) | setup |
created | – | setup |
beforeMount | – | onBeforeMount |
mounted | – | onMounted |
beforeDestroy | beforeUnmount | onBeforeUnmount |
destroyed | unmounted | onMounted |
同样的,beforeUpdate 在 composition API 中需要使用 onBeforeUpdate, updated => onUpdated
, activated => onActivated
四、组件间的通信
父子级组件
当子组件需要接收父组件中的数据时,可以通过 props 的方式传递
当父组件需要获取子组件中的数据时,可以在子组件中发送一个自定义事件,然后将相关数据当作参数传递出去,在父组件中监听对应的事件并接收参数。另外一种方式就是给子组件添加一个 ref,然后在父组件中通过 this.$refs.[componentRefName]
的方式获取子组件的实例然后拿到子组件中的数据
同级组件
同级组件之间进行数据通信,通常可以使用以下几种方式:
- 将数据交给共同的父级组件管理,子组件通过自定义事件将父组件传递数据,而父组件通过 props 将数据传给子组件,这种方式相对来说比较麻烦,有时可能需要层层上传,甚至到根组件
- 在 Vue 2 中可以通过 new 一个 Vue 的实例来创建 eventBus,通过全局事件总线来传递数据,不过这种方式在 vue 3 中被废弃了
- 通过第三方 PubSub 工具(比如:emitter)创建自定义事件,通过事件参数的方式来实现同级组件之间的通信
- 使用 Vuex / redux 这种全局状态管理工具也可以实现组件间的数据通信
- 还有种方式就是通过 mixin,但这种方式容易导致数据被污染,一般不建议使用
深层嵌套组件
父子级组件进行数据传递,通过 props 就可以实现,也比较方便,但当一个组件需要向孙子级组件或者更深层次的组件传递数据时,props 就显得比较复杂了,每个子组件上都需要添加一个 props,这种方法十分不方便,所以 Vue 提供了 Provider/Inject
来实现多级嵌套组件之间的数据传递。
在顶层组件中使用 Provider 定义需要传递下去的数据,在嵌套层级组件中通过 Inject 来使用
需要注意的是,组件 Provider 中的数据,只提供给其子孙级组件使用
五、对 Vue 进行扩展
在 vue 2 中,可以通过给 Vue 的原型加上自定义的方法来实现全局的方法,在组件实例中通过 this.customMethod 调用
Vue.prototype.customMethod
Vue 3 废弃了修改 prototype 来对 vue 进行自定义扩展的操作。vue 3 为应用实例(通常命名为 app)添加了 config 对象属性,在 config 属性上,通过配置 globalProperties 来实现自定义扩展,调用的方法与 vue 2 中基本一致
六、API 篇
v-if
与v-show
的异同
v-if 与 v-show 都是控制元素的显示与隐藏,其中 v-if 是通过控制 DOM 节点的创建与销毁来实现的,v-show 是通过控制 css 中的 display 属性来实现的。
v-if 有更高的渲染开销,v-show 有更高的初始化开销,如果要频繁控制 DOM 节点的话,需要使用 v-show,如果用在组件上,需要能触发组件的生命周期,则需要使用 v-if,这时需要注意最好不要对组件进行频繁的显示与隐藏切换操作
另外,v-if 可以与 v-else-if, v-else 配合使用来进行条件渲染,不过绑定了这些指令的元素必须为同级的
v-if
与v-for
v-if 与 v-for 其实是可以在同一个元素上使用的,但是不管是官方还是实际项目中都不推荐这么使用,如果需要在 v-for 生成的列表元素使用条件渲染,建议将 v-for 放在一个 template 标签上去使用,同理,也是建议将 v-if 放在 template 上去使用,也可以自定义一个包裹容器,只是 template 不会生成额外的 DOM 节点。
优先级:在 vue 2.x 中,v-for 的优先级要比 v-if 高,但在 vue 3中,v-if 的优先级要比 v-for 高
key
的作用
在 vue 中,key 这个属性最常见的用法就是与 v-for 一起使用,当然也可以独立使用,key 的主要作用就是对组件或虚拟DOM节点添加唯一标识符,方便底层 diff 算法在节点或组件发生变化时能快速定位更新。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。某些时候会导致 BUG,比如 v-for 渲染了 输入类元素时,缺少 key 或使用 index 当作key时,当列表长度发生了非顺序性变化时,就极易出 BUG。
watch
与computed
watch 与 computed 在很多时候,用法都差不多,但也有差异,computed 主要是依赖项发生了变化时,它自身属性跟着变化,但如果其依赖项没有发生变化时,则其同样不会发生变化,这种特性使其可以用来进行一定的性能优化。watch 主要是当侦听的数据发生变化时,去触发其他的数据变化。
简单来说,watch 主要用于需要根据数据变化来修改其他数据的操作,而computed更适用于依赖其他数据变化来修改自身的操作
另外,有较大开销和异步操作时,watch 更合适
- 样式绑定
Class绑定:vue 可以对元素的类名进行动态绑定,其值大概有以下几种:
- { className: truthy | falsy }
: 当绑定的值为对象时,该对象的属性则会被编译成元素的类目,而属性对应的值应该为一个Boolean值,用于控制该属性是否被编译成类目
- classNameString[]
: 纯 className 字符串组成的数组,数组中的所以元素都会被编译成样式类别
- classNameString | classObject []
: 对象语法与数组语法混用的模式
Style 绑定:
- { styleProperty: styleValue }
: 当样式绑定的值为对象时,对象的property则应该为具体样式对应的属性,value 则为样式的值,注意写法需要符合js对象的基本语法
- styleObj[]
: 当绑定的值为数组时,则数组中的每个元素应该为一个样式对象的引用
- 组件
props
与data
的优先级
根据 vue 的源码,props 的优先级要高于 data,也就是说当 props 和 data 中有同名属性时,最终会渲染 data 中的而不是 props 中的那个
异步组件:在组件的 components 中,通过
() => import(Component)
导入的组件就是异步组件动态组件:需要配合 keep-alive 使用,通过给组件添加
:is
属性来指定
七、其他需要熟悉用法的功能
- 自定义指令
- 插槽与作用域插槽
- 渲染函数(比较高级的用法,包括在 Vue 中写 JSX)
- 过滤器(Vue 3 废弃了,vue2中用的也不算多)
八、$nextTick
简单的来说,nextTick 的工作原理就是将传入的回调收集起来,等到 DOM 加载完成或者watcher触发之后再调用。因为是用的依赖收集的机制,所以先被收集的会先执行,所以如果多个 nextTick 嵌套时,外层的nextTick 会先执行
Vue 3 新增的一些值得关注的特性
- Composition API (重点)
- setup 方法
-<script setup>
语法糖
- 在 Composition API 中慎用解构赋值(可能导致响应性丢失),或者需要配合 toRefs 使用 - Teleport内置组件 (了解用法)
- 在
<style>
标签中使用 JS 变量 - 深度选择器的变更
- 样式的插槽选择器与全局选择器
Vue 面试常见知识点总结相关推荐
- JAVA编程多线程面试常见知识点灵魂拷问(一)
1.对线程池的了解 ThreadPoolExcutor创建线程池,包含七个参数.七个参数分别是核心线程数.最大线程数.任务队列.等待时间.时间单位.线程工厂.拒绝策略. 任务加入线程池算法流程,若加入 ...
- Java面试常见知识点总结
目录 面试常见知识点 静态代码块 代码块 构造方法之间的顺序 interface和abstract的区别 abstract能不能继承interface 反正可不可以 interface 和abstra ...
- threadlocal get为空_面试常见知识点:ThreadLocal
老套路,先列举下关于ThreadLocal常见的疑问,希望可以通过这篇学习笔记来解决这几个问题: ThreadLocal是用来解决什么问题的? 如何使用ThreadLocal? ThreadLocal ...
- 计算机网络面试常见知识点(含HTTPS和TLS)
计算机网络面试常见问题 计算机网络面试常见问题 一.TCP/IP 各层的结构与功能, 都有哪些协议? 1.1Tcp/IP的五层协议 1.2应用层 1.3运输层 1.4网络层 1.5数据链路层 1.6物 ...
- 京东深资架构师告诉你Java面试常见知识点(建议收藏)
后端架构师 专注研究 Java 核心技术.架构,不限于分享算法.架构.高并发.多线程.JVM.Spring Boot.Maven.分布式.Spring Cloud +Docker+k8s.Dubbo. ...
- [总结]vue开发常见知识点及问题资料整理(持续更新)
package.json中的dependencies与devDependencies之间的区别 –save-dev 和 –save 的区别 我们在使用npm install 安装模块或插件的时候,有两 ...
- Mysql面试常见知识点总结(一)
一.Mysql事务相关 事务特点,包括原子性.一致性.隔离性.持久性.一句话表达就是逻辑上的一组操作,要么执行,要不不执行. 事务的隔离性包括读取未提交.读取已提交.可重复读.串行化.这四种事务隔离性 ...
- python面试常见知识点收集,长期更新
问题 Python 1 python的数据类型 字典,字符串,列表,元组,集合 元组和列表的区别 元组和列表都属于序列. 列表属于可变序列,它的元素可以随时修改或者删除,而元组属于不可变序列,其中的元 ...
- [面面面]搞定计算机面试常见知识点——框架篇
之前的一篇总结已经写到了十万字,阅读起来太不方便了,所以按照类别拆分成多个短篇分享给大家. 文章目录 4. 框架类 4.1. Spring与Spring Boot的区别与联系 4.2. Kafka.A ...
- (五)Vue 面试真题演练
Vue 面试真题演练 v-show和v-if的区别 为何在v-for中用key 描述vue组件生命周期(父子组件) vue组件如何通讯(常见) 描述组件渲染和更新的过程 双向数据绑定v-model的实 ...
最新文章
- js的apply()与call()的区别
- tf initializer
- 在5分钟内将Spring Boot作为Windows服务启动
- Anaconda下改变python的版本
- matlab分析xml文件_如何在Java中读取XML文件(DOM分析器)
- 孙鑫VC学习笔记:第十二讲 (一) 介绍常量指针、指针常量,文本、二进制文件
- (转帖)美国人教你这样用Google,你真的会变特工
- 宗成庆《自然语言理解》第5章作业
- 飞机选座——附:东航320选坐攻略
- 计算机动画原理课程设计选题,组成原理课程设计设计一台模型计算机.pdf
- windows组策略_Windows中的“组策略”是什么?
- xmarks 又可以使用了. 太棒了
- 网盘搜索引擎原理大揭秘
- wps excel 中将一行多列数据转换为一行两列的格式 的方法函数
- eclipse背景怎么改颜色
- C语言低配版扫雷游戏
- sql server 入门教程
- 浅析“高内聚,低耦合”
- 1-Java的诞生和发展
- Java程序员日常开发提效工具(谷歌,Idea)-长期更新
热门文章
- neo4j中心度算法(Centrality algorithm)-3.Closeness Centrality algorithm
- windows defender卸载_16款仙级软件一定能提高你的Windows舒适度,工作效率翻倍
- 文件后缀和相应的文件类型,打开方法参考大全
- imagecropper php,cropper+php+ajax实现上传头像
- 3种常见软件项目工作量评估方法简述
- IE无法打开internet网站已终止操作的解决的方法
- 阿里巴巴大数据竞赛-天池
- onenote无法同步的原因E0000007 b4lka
- CentOS7(Linux)详细安装教程
- 产品经理学习——卡诺模型