30K+vue面试题

最新推荐文章于 2024-04-21 02:48:42 发布

China_forrest

最新推荐文章于 2024-04-21 02:48:42 发布

阅读量175

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/Chinawlinhao/article/details/110137529

版权

前端面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue面试题

近期开始总结vue模块的面试题，针对有一定vue基础的同学，希望对你有帮助。之后还会总结vue框架的思想及原理
以及vuex,vue-router等插件源码，请持续关注。

请说一下你对响应式数据的理解

核心考察点：数组和对象类型当值变化的时候如何劫持到。对象内部通过
defineReactive方法，使用Object.defineProperty将属性进行劫持（只会劫持已经存在的
属性），数组则是通过重写数组的方法来实现的。这里回答的时候可以带上一些相关的
知识点（比如多层对象是通过递归来进行劫持的，顺带提出Vue3中是使用proxy来实现
响应式数据的，具体的响应式数据的原理会在之后源码解析中解释到）
补充回答：内部的依赖收集是怎么做到的，以及每个属性都会有自己的dep属性，存放
着他所依赖的watcher,当属性变化后会通知自己对应你的watcher去更新。同时也可以谈
及性能优化方面的知识，对象的层级过深，性能就是差、不需要响应数据的内容不需要
放到data中、Object.freeze()可以冻结数据等。

Vue如何检测数组变化

数组考虑性能原因没有使用defineProperty（他是对数组的每一项进行拦截），而是选择重写数组（push/shift/pop/splice/unshift/sort/reverse）。
补充：在Vue中修改数组索引和长度是无法监控到的。需要通过以上7种变异方法修改数组才会触发数组对应的watcher进行更新。数组中如果是对象数据类型也会进行递归劫持
引发的问题：如果想要更改索引更新数据怎么办？可以通过Vue.$set()来进行处理，内部的核心是splice方法。

Vue中的模板编译原理

也即是如何将template转换成render函数的（这里需要注意我们开发的时候尽量不要使用template，因为将template转换成render方法需要在运行的时候进行编译操作，会有性能消耗，同时引用带有compiler包的vue体积也会变大。默认.vue文件中的template处理是通过vue-loader来进行处理的并不是通过运行时的编译，默认vue项目中引入的vue.js是不带有compiler模块的）
将tempate模板转换成ast语法树-parseHTML
对静态语法做静态标记
重新生成代码

声明周期钩子是如何实现的

Vue的生命周期钩子就是回调函数而已，当创建组件实例的过程中会调用对应的钩子方法，在创建组件实例的过程中会调用对应的钩子方法。
内部主要是使用callHook方法来调用对应的方法。核心是一个发布订阅模式，将钩子订阅好（内部用数组存储），在对应的阶段进行发布。

Vue.mixin的使用场景和原理

Vue.mixin的作用就是抽离公共的业务逻辑，原理类似“对象的继承”当组件初始化是会调用mergeOptions方法进行合并。如果混入的数据和本身组件中的数据冲突，会此采用就近原则以组件的数据为准。
同时Vue.mixin有很多的缺陷：命名冲突问题、数据来源问题。注意mixin的数据是不会被共享的。