VUE常见进阶问题

一、什么是订阅发布模式,观察者模式
首先要知道,它们都属于一种“设计模式”:在软件实现过程中,针对问题的较好解决方案。

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的了解
我的总结

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,898评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,401评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,058评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,539评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,382评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,319评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,706评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,370评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,664评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,326评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,730评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2 335

推荐阅读更多精彩内容