2023最新vue面试题资源-CSDN文库

185 浏览量 2023-05-14 11:11:51 上传评论收藏 1.76MB PDF 举报

资源推荐

资源详情

资源评论

Vue⾯试题

⼀、Vue 基础

1. Vue的基本原理

当⼀个Vue实例创建时，Vue会遍历data中的属性，⽤ Object.defineProperty（vue3.0使⽤

proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依

赖项的setter被调⽤时，会通知watcher重新计算，从⽽致使它关联的组件得以更新。

2. 双向数据绑定的原理

Vue.js 是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty()来劫持各

个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下⼏个

步骤：

1. 需要observe的数据对象进⾏递归遍历，包括⼦属性对象的属性，都加上setter和getter这样的

话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染⻚⾯视图，并将每个指令对应

的节点绑定更新函数，添加监听数据的订阅者，⼀旦数据有变动，收到通知，更新视图

3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在⾃身实例化时往属

监听数据必须是data中声明的或者⽗组件传递过来的props中的数据，当发⽣变化时，会触发其他操

作，函数有两个的参数：

immediate：组件加载⽴即触发回调函数

deep：深度监听，发现数据内部的变化，在复杂数据类型中使⽤，例如数组中的对象发⽣变化。

需要注意的是，deep⽆法监听到数组和对象内部的变化。

当想要执⾏异步或者昂贵的操作以响应不断的变化时，就需要使⽤watch。

总结：

computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发⽣

改变，下⼀次获取 computed 的值时才会重新计算 computed 的值。

watch 侦听器 : 更多的是观察的作⽤，⽆缓存性，类似于某些数据的监听回调，每当监听的数据变

化时都会执⾏回调进⾏后续操作。

运⽤场景：

当需要进⾏数值计算,并且依赖于其它数据时，应该使⽤ computed，因为可以利⽤ computed 的

缓存特性，避免每次获取值时都要重新计算。

当需要在数据变化时执⾏异步或开销较⼤的操作时，应该使⽤ watch，使⽤ watch 选项允许执⾏

异步操作 ( 访问⼀个 API )，限制执⾏该操作的频率，并在得到最终结果前，设置中间状态。这些

都是计算属性⽆法做到的。

6. Computed 和 Methods 的区别

可以将同⼀函数定义为⼀个 method 或者⼀个计算属性。对于最终的结果，两种⽅式是相同的

不同点：

computed: 计算属性是基于它们的依赖进⾏缓存的，只有在它的相关依赖发⽣改变时才会重新求

值；

method 调⽤总会执⾏该函数。

7. slot是什么？有什么作⽤？原理是什么？

slot⼜名插槽，是Vue的内容分发机制，组件内部的模板引擎使⽤slot元素作为承载分发内容的出⼝。

插槽slot是⼦组件的⼀个模板标签元素，⽽这⼀个标签元素是否显示，以及怎么显示是由⽗组件决定

的。slot⼜分三类，默认插槽，具名插槽和作⽤域插槽。

默认插槽：⼜名匿名查抄，当slot没有指定name属性值的时候⼀个默认显示插槽，⼀个组件内只有

有⼀个匿名插槽。

具名插槽：带有具体名字的插槽，也就是带有name属性的slot，⼀个组件可以出现多个具名插槽。

剩余74页未读，继续阅读

内容反馈

工具盒子

粉丝: 58
资源: 1313

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip