一、什么是订阅发布模式，观察者模式
首先要知道，它们都属于一种“设计模式”：在软件实现过程中，针对问题的较好解决方案。
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的了解
我的总结
网友评论