Vue高频面试题分析
v-show和v-if的区别
v-show是通过控制display: hidden来控制显示和隐藏v-if是通过组件的创建和销毁实现显示和隐藏
为何需要在v-for中用key
-
讲讲
diff算法概述 -
必须使用
key，且不能是index和random，判断是否为sameNode -
目的：减少渲染次数、提升渲染性能
描述Vue组件生命周期
结合官网这张图理解。
Vue组件如何通讯
- 父子组件通过
props和emits - 也可以自定义事件
$on,$off - vuex
描述组件渲染和更新的过程
详细可以看看渲染-原理篇
- 能够描述完整流程图
- 根据流程图描述初次渲染->更新
双向数据绑定v-model的实现原理
-
描述场景(inout输入框)
-
v-bind绑定value -
v-on绑定input框的input事件 -
通过触发
input事件将e.target.value赋值给绑定值
对MVVM模型的理解
computed有何特点
- 有缓存，data不变不会重新计算
- 有响应式，提高性能
Vue2为何组件data是一个函数
- 具体可以讲讲编译的原理
- 组件渲染完后是一个一个的class，如果用函数包裹，数据就全局共享了
请求应该放在哪个生命周期
mounted、vue3组合式api中是onMounted
如何将组件所有props传递给子组件
$attr
多个组件有相同逻辑，如何抽离
- vue2中有
mixin（容易造成变量覆盖，变量来源不易追溯） - vue3中使用
hooks
何时适合使用异步组件
defineAsyncComponent- 加载大组件或者路由懒加载时
何时使用keep-alive
- 缓存组件，不需要重复渲染
- 比如多个静态tab页的切换，可以进行性能优化
在beforeDestory中可以做什么
- 解绑自定义
$on、$off - 清除定时器
- 解绑自定义
dom事件
什么是作用域插槽
子组件通过slot传值给父组件
<script setup>
import { ref } from 'vue'
const name = ref('airhua')
</script>
<template>
<div>
<h1>作用域插槽</h1>
<slot :item="name"></slot>
</div>
</template>
父组件接收后只能在slot作用域内使用
<Scope>
<template #default="slotProps">
<p>内容{{ slotProps.item }}</p>
</template>
</Scope>
vuex中action和mutation有何区别
- action中处理异步，mutation不可以
- mutation做原子操作
- action可以整合多个mutation
用vnode描述一个dom结构
dom结构
<div class="app">
<p style="color: red">test</p>
<span>111</span>
</div>
vnode结构
const data = {
tag: 'div',
props: {
className: 'app',
},
children: [
{
tag: p,
props: {
style: 'color: red',
},
children: 'test',
},
{
tag: span,
children: '111',
},
],
}
Vue实现响应式的原理
具体看响应式-原理篇
vue2实现方式及其弊端vue3改用Proxy但是不能被ployfill
简述diff算法过程
具体看diff算法-原理篇
patch函数来更新新的vnodesameVnode判断同层级节点是否为相同- 不同需要重建，相同则
patchVnode判断节点文本和children是否需要更新 - 当新旧节点都含有
children节点则需要走到下一层级进行updateChildren - 寻找
children是否有相同的，具体方式看源码，无相同节点直接添加，有相同节点又回到patchVnode
Vue为何是异步渲染，$nextTick
- 因为需要异步渲染，将data修改做整合在一起修改，从而提升效率
- 比如如果需要在
data修改完后拿到最新的渲染dom，可以使用nextTick
