vue面试准备

父子传值

1. 父子组件传值 props / this,$emit

2. 兄弟组件传值 bus总线 自定义事件

3.穿透传值 attrs / listens

4. vuex

5. localstrage

6.this.$children[0]  / this.$parents

7.路由传值

8.作用域插槽

v-for中用key

因为vue组件高度复用，增加Key可以标识组件的唯一性，key的作用主要是为了高效的更新虚拟DOM

生命周期 （画图）

 创建阶段 / 挂载阶段 / 更新阶段 / 销毁阶段

created与mounted的区别

created之后要指定el 和 指定template

只是初始化实例 存在js内存中的变量 并没有开始渲染

mounted 真正在页面中渲染出来了

可以做ajax信息请求 和 绑定事件

beforDestroy

解除绑定 自定义事件

销毁子组件 以及监听事件 定时任务要销毁 绑定的window事件要销毁

输入url发生了什么

自定义v-model的实现

  $nextTick( 异步渲染)

data改变后 DOM不会立即渲染

nextTick会在DOM渲染后被触发，以获取最新DOM节点

页面渲染会把data的修改做整合，多次data只会渲染一次

slot

父组件往子组件传点东西

 作用域插槽 / 具名插槽

动态组件

is属性    :is=‘组件名字’

<component :is=‘组件名字’>

异步组件

echarts图表渲染 比较大的文件

import（） 函数  按需加载

 

不用import引入

在components 里面用 import：（）= 》 import（‘。/’） （组件异步加载）

Keep-alive

缓存组件 频繁切换 不需要重复渲染

常见性能优化 （异步组件 keep-alive组件）

适用场景  tab切换

mixin 混合

多个组件相同逻辑，抽离出来

不是完美的 会有一些问题

　　　　可读性太差 / 来源不明确

　　　　多个会有命名冲突 覆盖（因为没办法融合）

　　　　组件复杂度高（多对多的关系）

composition api 指导写法（vue3）

 Vue-router

import：（）= 》 import（‘。/’） （组件异步加载） 懒加载

路由模式（hash history（需要后端支持））

 

路由配置 / 动态路由 懒加载

 

节流 防抖

编程的一个理念 引用 修改一个地方 其他地方都变