最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS:
- 零配置,天然整合进 Vue 环境
网上已经有很多解析的文章,没必要赘述。本文仅就 中心化、信号机制、数据流 三个点的实现上展开,讨论一下 Vuex 实现上的缺陷。
中心化
===
在Vuex中,store
整合了所有功能,是对外提供的主要接口,也是Flux模式下的数据管理中心。通过它,Vuex 主要对外提供了:
-
信号相关的:
dispatch、commit
-
侦听器接口:
subscribe
-
state 值变更接口(替换state值,不应调用):
replaceState
-
state 模型变更接口(建议仅在按需引用场景下使用):
registerModule、unregisterModule
-
热更新接口(HMR逻辑,不关注):
hotUpdate
官方实现的 store 非常复杂,耦合了许多逻辑。简便起见,我们刨除各种旁路逻辑,只关注Flux架构的中心化
、信号控制
机制,可以总结出一份非常简单的实现:
export default class Store {
constructor(options) {
this._state = options.state;
this._mutations = options.mutations;
}
get state() {
return this._state;
}
commit(type, payload) {
this._mutations[type].apply(this, [this.state].concat([…payload]));
}
}
这是理解 Vuex 的核心,整份代码只有两个逻辑:
-
通过
_state
属性实现中心化、自包含数据中心层。 -
通过
dispatch
方法,回调触发事先注册的_mutations
方法。
这份代码有很多问题,举例来说:
-
使用简单对象作为 state
-
状态的突变仅仅通过修改state对象属性值实现
-
没有任何有效的机制,防止 state 对象被误修改
这些设计问题,在Vuex中同样存在,这与Vue.$watch
机制有非常密切的关系(见下文),个人认为这是极其不严谨的。
信号机制
====
Vuex 提供了两个与信号有关的接口,其源码可简略为:
export default class Store {
…
commit (_type, _payload, _options) {
…
const entry = this._mutations[type]
this._withCommit(() => {
entry.forEach(function commitIterator (handler) {
handler(payload)
})
})
this._subscribers.forEach(sub => sub(mutation, this.state))
…
}
dispatch (_type, _payload) {
…
const entry = this._actions[type]
return entry.length > 1
-
? Promise.all(entry.map(handler => handler(payload)))
- entry 0
}
…
}
两者之间的不同在于:
-
dispatch
触发的是action
回调;commit
触发的mutation
回调。 -
dispatch
返回 Promise;commit
无返回值。
这样的设计意图,主要还是职责分离,action 单元用于描述 发生了什么;mutation用于修改数据层状态state。Vuex 用相似的接口,将两者放置在相同的地位上,这一层接口设计其实存在弊病:
-
action、mutation 各自需要一套type体系
-
允许应用层绕过action,直接
commit
mutation -
state 并非
immutable
的,而且在 action 中允许修改state
虽然确实提升了便利性,但对初学者而言,可能导致如下反模式:
-
设计了两套无法正交的type体系
-
造成“直接提交mutation即可”的假象,破坏了Flux的信号机制
-
在 action 中手误修改了 state ,而没有友好的跟踪机制(这一点在getter中特别严重)
由于没有确切有效的机制防止错误,在使用Vuex的过程中,需要非常非常警惕;需要严谨正确地使用各种职能单元;或者以规范填补设计上的缺陷。
单向数据流
=====
这里的数据流是指从 Vuex 的 state 到 Vue 组件的props/computed/data
等状态单元的映射,即如何在组件中获取state。Vuex 官方推荐使用 mapGetter、mapState 接口实现数据绑定。
mapState
该函数非常简单,代码逻辑可梳理为:
export const mapState = normalizeNamespace((namespace, states) => {
const res = {}
…
normalizeMap(states).forEach(({ key, val }) => {
res[key] = function mappedState() {
…
return typeof val === ‘function’ ?
val.call(this, state, getters) :
state[val]
紧跟潮流
大前端和全栈是以后前端的一个趋势,懂后端的前端,懂各端的前端更加具有竞争力,以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线,由于图片太大仅展示一小部分