1.Vue组件通信方式(按照使用频次)
props/$emit(defineProps.defineEmits)
ref/$refs(本身有隔离限制,使用defineExpose暴露)
$attrs/$listener(Vue3合并为一个$attrs)
Vuex/Pinia
事件总线$emit/$on(mitt) ---也可是手写消息发布订阅
provide/inject
本地缓存
$parent/$children --- children获取子组件集合顺序不固定
其他相关:
postMessage(Web Worker)
2.Vue响应式原理(下面简写一些注意点)
Vue2使用Object.defineProperty的缺陷(对象新增删除属性,数组索引、长度修改)
使用Vue.set和Vue.delete解决,底层原理defineReactive给新属性添加监听
Vue3Proxy原理,只能拦截对象,所以Vue3使用ref、reactive包装
Vue2:defineReactive封装Object.defineProperty完成属性劫持和视图更新,数组类型依靠重写的变异方法;
Vue3:ref/reactive包装Proxy完成属性劫持和视图更新
3.Vue2和Vue3区别
生命周期
Teleport
响应式原理
虚拟DOM以及diff算法
TreeShaking
事件缓存
TS支持
其他写法上的(插槽、computed、根节点个数、mixins淡化等)
4.其他细化问题、
Vue Router
Vuex/Pinia(state、getters、mutations、actions、modules)
keep=alive
v-if和v-for优先级
v-if和v-show有什么区别
key的作用
每个大块下面都有很多小的零碎知识们可以针对每个点查阅资料或者结合AI深入学习
自己学习的记录文档,如果有写错的还有补充的欢迎各位大佬评论指正!