【面经系列】Vue面经

最新推荐文章于 2024-06-19 13:03:24 发布

2401_84097510

最新推荐文章于 2024-06-19 13:03:24 发布

阅读量256

点赞数 4

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84097510/article/details/138017707

版权

程序员专栏收录该内容

157 篇文章 0 订阅

订阅专栏

【Q4】你知道 Vue 双向数据绑定的原理吗？

Vue 双向数据绑定是指：数据变化更新视图，视图变化更新数据，例如输入框输入内容变化时，data 中对应的数据同步变化，data 中绑定的数据变化时，输入框的内容同步变化。

Vue 主要通过4个部分来实现双向数据绑定：

监听器 Observer ：对数据对象进行遍历，利用 Object.defineProperty() 在属性上都加上 getter 和 setter ，从而监听数据的变化。
解析器 Compile ：解析模板指令，将模板中的变量都替换成数据，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变化就会调用更新函数进行更新。
订阅者 Watcher ：订阅者是监听器和解析器之间通信的桥梁，主要任务是订阅监听器中的属性值变化的消息，当收到属性值变化的消息时，触发解析器中对应的更新函数。
订阅器 Dep ：订阅器采用发布-订阅设计模式，用来收集订阅者 Watcher 对监听器 Observer 和订阅者 Watcher 进行统一管理。

【Q5】为什么 Vue 要采用异步渲染？异步渲染是如何实现的？

如果不采用异步渲染，那么每次更新数据都会进行重新渲染，这会对性能大打折扣，异步渲染是提高性能的手段之一。

只要监听到数据变化，Vue 将开启一个队列，并缓冲在同一个事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后，在下一个事件循环中，Vue 刷新队列并执行实际工作。Vue 内部对异步队列常使用原生的 Promise.then、MutationObserver 和 setImmediate。如果环境不支持，则采用 setTimeout(fun,0)。

【Q6】Vue 是如何检测数组的变化

在 Vue 官方中，提供了7个操作数组的方法：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

用于 “响应式” 的操作数组，也就是说，通过以上7个方法改变数组的元素，这会导致 data 中的数据变化，从而导致视图发生变化。除此以外，还可以通过 “新数组” 替换 “旧数组” 的方式来触发视图层的改变。但是，千万不能通过索引直接改变一个数组，这样不会引起视图层的改变，只是单纯的改变了数据。还有，不能通过修改数组长度来删除元素。

Vue 将 data 中的数组进行了原型链重写，指向了自己所定义的数组原型方法（也就是说上面的7个方法是Vue重写过的），从而实现了通过这些方法改变数组就可以通知视图层更新的效果。

【Q7】谈谈你对 Vue 生命周期的理解

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一些列过程，就是生命周期。

生命周期可大致分为 8 个阶段：实例创建前/后，挂载前/后，更新前/后，销毁前/后，分别对应8个回调钩子。

实例创建前。beforeCreate() —— vue 实例的挂载元素 $el 和数据对象 data 都是 undefined ，还未进行初始化。
实例创建后。created() —— 完成了 data 数据初始化，但未挂载。
挂载前。beforeMount —— vue 实例的 $el 和 data 都初始化了，相关的 render 函数首次被调用。实例已完成以下配置：编译模板，把 data 里面的数据和模板生成 html。但是此时没有挂载到 html 元素上！！！
挂载后。mounted —— el 被 $el 替换，并挂载到 html 元素上。
更新前。beforeUpdate —— 在数据更新之前调用。
更新后。updated —— 此时组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。
销毁前。beforeDestroy —— 实例销毁前调用
销毁后。destroyed —— 实例销毁后调用。

【Q8】v-show 和 v-if 有什么区别

两者都用于控制 “显示/隐藏” 元素，v-if 是真正的条件渲染，如果条件为假，则该元素不会被挂载到 DOM 树上，只有当条件为真时才进行渲染。v-show 本质是控制 css 的 display 属性来进行显示隐藏的，不管初始条件是什么，该元素都会被渲染。

【Q9】 Vue 是单向数据流还是双向的？

官方是这样来介绍的：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这也说明了不能在子组件中改变 prop ，prop 永远都是只读的。如果非得改变 prop 的话，可以考虑在子组件中通过计算属性来修改。

每次父组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。

【Q10】组件通信的方式你知道哪些？