面试官版前端面试小册Vue篇(二)

·  阅读 166

Computed watch 和 method

答案:

computed:默认computed也是一个watcher具备缓存,只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据,使用 computed

watch:每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情,使用watch。

method:只要把方法用到模板上了,每次一变化就会重新渲染视图,性能开销大

v-if 和 v-show 区别

答案:

  • v-if 如果条件不成立不会渲染当前指令所在节点的DOM元素

  • v-show 只是切换当前DOM的显示与隐藏

v-for和v-if为什么不能连用

答案

v-for 会比 v-if 的优先级更高,连用的话会把 v-if 的每个元素都添加一下,造成性能问题。

v-html 会导致哪些问题(简单)

答案

  • XSS 攻击

  • v-html 会替换标签内部的元素

描述组件渲染和更新过程

答案

渲染组件时,会通过 vue.extend() 方法构建子组件的构造函数,并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程,核心就是 diff 算法。

组件中的data为什么是函数

答案

避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例,如果 data 是一个对象的话,这些实例用的是同一个构造函数。为了保证组件的数据独立,要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。

为什么要使用异步组件?

答案

  1. 节省打包出的结果,异步组件分开打包,采用jsonp的方式进行加载,有效解决文件过大的问题。
  2. 核心就是包组件定义变成一个函数,依赖 import() 语法,可以实现文件的分割加载。

详细的看官方文档:cn.vuejs.org/v2/guide/co…

action 与 mutation 的区别

答案

  • mutation 是同步更新, $watch 严格模式下会报错
  • action 是同步操作,可以获取数据后调用 mutation 提交最终数据

插槽与作用域插槽的区别

插槽

答案

  • 创建组件虚拟节点时,会将组件儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}

  • 渲染组件时会拿对应的 slot 属性的节点进行替换操作。(插槽的作用域为父组件)

作用域插槽

答案

  • 作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数,当子组件渲染时,会调用此函数进行渲染。

  • 普通插槽渲染的作用域是父组件,作用域插槽的渲染作用域是当前子组件。

vue中相同逻辑如何抽离

答案

其实就是考察 vue.mixin 用法,给组件每个生命周期,函数都混入一些公共逻辑。

谈谈对keep-alive的了解

答案

keep-alive 可以实现组件的缓存,当组件切换时不会对当前组件进行卸载。常用的2个属性 include/exclude ,2个生命周期 activateddeactivated

Vue性能优化

答案

编码优化

  • 事件代理
  • keep-alive
  • 拆分组件
  • key 保证唯一性
  • 路由懒加载、异步组件
  • 防抖节流

Vue加载性能优化

  • 第三方模块按需导入( babel-plugin-component
  • 图片懒加载

用户体验

  • app-skeleton 骨架屏
  • shellap p壳
  • pwa

SEO优化

  • 预渲染

最后的话

🚀🚀 觉得不错的朋友可以⭐️关注我,后续会持续更新~

如果想获取完整版面试小册,可以加入这边的交流裙,前面:1048,中间:337,最后:049,裙里从学生到大佬都有,资源免费分享,不见不散哦!

⭐️⭐️ 最后祝各位正在准备秋招补招和春招的小伙伴面试顺利~,收割offer,我们一起加油吧🤝!还有就是 新年快乐❤️ ❤️ ~

分类:
前端
标签: