一、什么是订阅发布模式,观察者模式
首先要知道,它们都属于一种“设计模式”:在软件实现过程中,针对问题的较好解决方案。
1.1、观察者模式
观察者直接订阅主题,主题可以直接发布消息给观察者,触发观察者的更新。
1.2、订阅-发布模式
订阅发布模式中有个调度中心的存在。订阅者将自己订阅的事件注册到调度中心,当发布者将事件发布到调度中心时,由调度中心主动统一处理,通知订阅者更新。在vue中dep代表订阅者,watcher代表发布者,由Observer类创建二者之间的联系。
二、响应式原理
三、vuex的工作原理
四、nextTick实现方式
五、创建虚拟dom
六、vue-router权限控制
利用vue-router的路由守卫,结合vuex进行处理。
1、首先只考虑判断用户是否登录的场景
在store中设置变量,用于存放用户登录后获取到的token。当用户登录后,向服务器发请求获取到token,然后进行路由跳转时,在beforeEnter路由守卫里,判断store中是否存在token。若存在即可正常跳转,若不存在理解用户为未登录状态,直接重定向到登录页。
2、在某些业务场景下,用户会有自己的具体权限
我们在创建路由对象时,填充配置项meta,其中存放每个路由对应的权限值。当用户登录时,从服务器查询到用户的权限值数组,将其存放在store中。跳转路由时,在beforeEach钩子函数中访问to.meta,判断用户是否有该路由的权限。若有则跳转,反之阻止跳转,或者直接重定向登录页走好不送QAQ;
//在创建路由时这样写
{
name : 'secondPage',
path: 'secondPage',
component : () => import('../components/Test/secondPage'),
meta: {
requireAuth: true, // 需要权限的路由
flag: 1 //路由权限枚举值
}
}
// 在导航守卫中,做权限判断
router.beforeEach((to, from, next) => {
const authList = store.state.authList; //存放在store中的用户权限值数组
if (to.meta.requireAuth && authList.some(item => item === to.meta.flag)) {
next();
} else {
next(false);
}
});
七、组件设计原则
1、将页面理解成组件的容器,通过不同的组件拼接搭建出完整功能
2、设置好合理的出口和入口,入口要做参数校验,设置缺省值。
3、父组件通过props向子组件传递数据,子组件用$emit向父组件上报事件,在父组件中处理事件回调。
4、考虑到某些未来可能使用的场景,在组件中设置插槽slot
5、将逻辑处理内聚在组件内部,用户只要明确输入配置后组件将变成何种状态即可,不需要关心内部逻辑
6、将内部可复用的功能模块拆分细化成一个个子组件,组件由子组件拼接出来
7、有详细地业务与代码注释
八、组件嵌套多层
在vue组件系统中,编码组件时会出现组件数量很多,然后层层嵌套的问题。面对这种层级很深的组件,我们一般有两种写法
1、props和$emit
在每个层级的组件都使用props和$emit,这样数据就可以一层一层从父组件向子组件传递。同时,若子组件有消息上报的话,也会一层层向父组件上报事件。
这样写在层级太多的时候很麻烦,有很多代码重复,我们也可以考虑用vuex
2、vuex
将父子组件需要多层传递的数据提取出来,将其放在全局对象store的state属性中,由于vuex相当于在全局创建了一个巨大视图,每个组件都可以从store中获取状态,这样就避免多层传递。
同时,触发事件也是一样。我们直接将事件响应函数写在store的actions或mutations中,执行其中的方法做逻辑处理,更新全局状态。避免一层层向上传递事件。
3、其他思考
层级我在介绍VUE的一本书中看到过dispatch方法,向广播一样派发事件,这样的话也不用每一层级的组件都用$emit传递一次。不过这个方法在vue2就取消了,应该也用不上了。
九、MVP MVVM MVC的了解
我的总结