vue路由守卫面试题（vue 路由守卫）

编程日记 • 2025-02-28 12:06 • 阅读 23

vue2采用数据劫持，结合发布者订阅者模式，通过Objec.defineProperty对数据进行拦截，设置getter,setter，当数据被访问的时候，会调用getter，vue会通知所有依赖这个数据的视图组件，当要去修改的时候，会调用setter,vue去更新所有依赖这个属性的视图组件

vue3采用proxy代理，通过对监听对象和数据的读取和写入操作从而实现数据变化的监听，实现当数据变化的时候自动更新视图

vue2
父：beforeCreate-Created,beforeMount
子：beforeCreate-Created,beforeMount-Mounted
父：Mounted
父：beforeUpdate
子：beforeUpdate-Updated
父：Updated
父：beforeDestory
子：beforeDestory-Destoryed
父：Destoryed
vue3
父组件的 setup() 函数和生命周期钩子会先于子组件执行。
父: onbeforeMount 和子: onbeforeMount 会同时执行。
父: onmounted 和子: onmounted 会同时执行。
父: onbeforeUpdate 和子:onbeforeUpdate 会同时执行。
父: onupdated 和子:onupdated 会同时执行。
父: onbeforeUnmount 和子:onbeforeUnmount 会同时执行。
父: onunmounted 和子:onunmounted 会同时执行。

v-model本质是语法糖，通过v-on绑定value属性，通过v-bind绑定input事件

全局守卫：‌beforeEach、‌afterEach、‌beforeResolve
组件守卫：‌beforeRouteEnter、‌beforeRouteUpdate、‌beforeRouteLeave
路由独享守卫：‌beforeEnter

vuex:采用全局单例模式，通过一个store对象来管理所有状态
pinia:采用分离式，每个组件都有自己的store实例
vuex:包含state，mutation，action，getters，module
pinia:包含id,state,getters,actions

minxs通过对象的方式组合和共享代码，hooks通过函数的方式定义逻辑和状态
minxs不能追踪数据来源和传参，hooks可以。
minxs的生命周期调用会比组件快，会存在数据被覆盖的问题。

vue2中v-for高于v-if
vue3中v-if高于v-for

MVC:Model-View-Controller
Model:数据层
View:视图层
Controller:控制器
MVVW:Model-View-ViewModel
Model:数据层
View:视图层
ViewModel:逻辑交互层
MVVW通过ViewModel实现M和V之间的双向通信,提高代码可重用性和可维护性
MVC：是单向通信，如过要改变M需要手动操作DOM

vue路由守卫面试题（vue 路由守卫）

相关推荐