vue面试题（2）

flk
136 阅读6分钟

  1. Vue 单页应用与多页应用的区别 单页应用在首屏加载时，加载所有js和css资源，之后的页面加载，只是页面的局部组件切换，不进行整个页面加载，因此切换页面时速度快，用户体验好，不过首屏加载较慢，且不利于seo
    多页应用，在每次页面跳转时，都需要加载整个页面，因为性能消耗高，页面切换相对较慢，利于seo

  2. Vue template 到 render 的过程 因为vue的模板语法，html无法直接进行编译需要将，模板字符串进行转换，转成ast语法树，然后再根据语法树生成render函数

  3. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？ 不用，会开启一个任务队列，他会缓冲同一任务队列的数据变更，然后再对视图进行更新，如果一个watcher被操作多次，只会被推入队列一次，避免了对数据进行重复计算，和dom重复渲染。

  4. 简述 mixin、extends 的覆盖逻辑 mixins 并入目标组件的options，可以有多个mixins
    extends 只能有一个且优先级比混入高

  5. 描述下Vue自定义指令 derectives：{ onaaa：{} }

  6. 子组件可以直接改变父组件的数据吗？ 不可以，因为父组件对子组件是单向数据流，通过props传递数据，子元素不能直接改变props的值， 为了防止子组件意外的修改父组件数据

  7. 对 React 和 Vue 的理解，它们的异同 同： 组件化，虚拟dom，mvvm，都有状态管理中心，都有自己的构建工具

不同： 虚拟dom原理不同， vue双向绑定，react 单向数据流。
写法不一样 vue模板字符串，react jsx语法
vue更轻量

  1. Vue的优点 简单易学， 组件化， 数据驱动， 渐进式， 运行速度快

  2. assets和static的区别 区别就是static属于静态文件，vue进行打包压缩时，不对对其进行处理。都是存储静态文件的

  3. delete和Vue.delete删除数组的区别 delete 只是将数组的项变成empty ，并没有删除数组的元素。
    另一个会删除数组的元素，数组的长度也会改变

  4. vue如何监听对象或者数组某个属性的变化
    对象通过$set ,数组通过vue重写的操作数组的方法splice

  5. 什么是 mixin ？ mixins混入，当各个组件之间，有重复的逻辑时，可以使用混入将重复逻辑写入，然后组件引用就可以了，
    混入写的options 配置选项会并入到目标组件

  6. Vue模版编译原理 通过大量的正则表达式，对模板进行转换，将其转换为ast语法树，再根据ast语法树生成render函数

  7. 对SSR的理解 就是服务端渲染，将渲染html的操作，放到服务端，利于seo，加快首屏加载，不过可用狗子就两个，beforeCreate和created

  8. Vue的性能优化有哪些 v-if v-show合理使用
    v-for 加key
    尽量减少data里的数据，因为data里都会设置响应式依赖，耗内存
    路由懒加载，图片懒加载
    使用cdn加载第三方资源
    静态资源用p-pre跳过编译
    长列表数据用Object.rezze 冻结
    第三方插件按需引入，
    减少重排重绘
    使用防抖节流，用keep-alive缓存组件
    骨架屏；将静态文件打包压缩；服务端渲染；预渲染

  9. 对 SPA 单页面的理解，它的优缺点分别是什么？ 优点页面切换速度快，对于服务器压力更小，对于开发者，前后端分离职责清晰，用户体验好，缺点首屏加载慢，不利于seo

  10. template和jsx的有什么分别？ template 语法跟简单，更直观，利于维护
    jsx 对于编写高阶组件更友好

  11. vue初始化页面闪动问题 出现{{name}}由于代码没有编译完成，可以用v-clock {display：none} 指令，此指令可以让代码编译完成之后再显示到页面上

  12. MVVM的优缺点 优点解放了开发者，因为数据驱动，不用手动操作dom ，降低了代码耦合性
    缺点：bug不易被调试，因为中间层vm对数据进行了处理，当发生bug时，无法确定是哪出现了问题， 对于大型项目而言，很消耗内存

  13. Vue.use的实现原理 通过判断插件是否存在，存在则直接返回

Vuex是什么 一个全局状态管理工具

vuex在各模块在核心流程中的主要功能： state 存储初始化数据
getter 根据初始化数据进行计算，相当于optios 的computed 计算属性
actions 对mution进行提交。可以异步，不能直接修改state commit
mutation 对state进行修改，不能异步，是修改state唯一途径 dispatch
module 可以拆分vuex成很多模块

Vuex中action和mutation的区别
异步，操作对象不一样

Vuex 和 localStorage 的区别 vuex存于内存，local存于本地文件 vuex能数据响应式，local不能只能存字符串

为什么要用 Vuex
在多层嵌套的组件通信时，进行组件通信十分繁琐，通过vuex可以简化

Vue3.0有什么更新 响应式原理更新 proxy代理，消除了vue2的问题
组件更新 加了三个组件

Vue 3.0 中的 Vue Composition API？ 将vue2中分散的逻辑集合在一块，全放在一个函数里，通过retrun返回结果

对虚拟DOM的理解？
原理是通过js对象描述dom对象，通过事件机制，一次性将多个dom操作一次性更新到页面， 从而减少重排重绘，提高渲染性能

虚拟DOM的解析过程
将真实dom转为虚拟dom，同上一次的虚拟dom进行对比，对比出差异部分，再将差异部分渲染到dom树

  1. 为什么要用虚拟DOM
    保证性能下限，跨平台

  2. DIFF算法的原理 通过对比两个虚拟dom，判断出不一样的部分，然后将不一样的部分更新到页面

v-for key作用，为何建议用index当key
因为key是用来跟踪虚拟节点的，通过key可以实现就地复用

avatar
文章
阅读
粉丝