面试官版前端面试小册Vue篇（二）

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个生命周期 activated ， deactivated

Vue性能优化

答案

编码优化：

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

Vue加载性能优化

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

用户体验

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

SEO优化

• 预渲染

最后的话

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

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

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