美文网首页马文的地下室
学习笔记《Vue 的 Flux 实现》

学习笔记《Vue 的 Flux 实现》

作者: 马文Marvin | 来源:发表于2017-05-01 17:28 被阅读24次

Flux 是目前最被普遍认可的前端架构,受到 React Angular Vue 的一致推荐,是不可避免的趋势:

  • iOS、Andriod、Web多端原生系统,技术栈迥异,造成前端技术成为发展的共识
  • 前端系统复杂度不断提升,MVC 架构先天不足
  • IE 逐渐退出主流,新一代浏览器占领市场

什么是 Flux

Flux 是 Facebook 系统化的一套响应式编程架构方案:

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

这里有一个带视频的详细介绍:
https://facebook.github.io/flux/docs/in-depth-overview.html

Vue 的 Flux 实现

Vue 的 Flux 实现有一本电子书做了细致的介绍:《Vuex Concepts: The Flux Application Architecture for Vue.js》
下载地址:http://bookdl.me/vuex-concepts-the-flux-application-architecture-for-vue-js/

在阅读这本书以后,再借助 Vue 的官方文档就可以很快的推进起来 Flux 架构,需要多种 Vue 技术的配合:

  • Vuex 作为数据状态管理的中心,负责数据存储和调度
  • Vue 本身实现响应式编程机制,对 Vuex 中的数据进行响应
  • vue-router 实现路由的调度,以及 Url 和 component 的结构设计
  • History API 配合 Vuex 对 Url 进行微调

History API

// history API 可以实现 Url 的变化但是不刷新页面
history.replaceState(stateName, 'title', 'urlPartial')

(随着项目的深入,以后会补充细节性的内容)

相关文章

  • 学习笔记《Vue 的 Flux 实现》

    Flux 是目前最被普遍认可的前端架构,受到 React Angular Vue 的一致推荐,是不可避免的趋势: ...

  • Flux架构实践

    从最开始学习React就接触到Flux架构,接着前端组件化框架都涉及到Flux概念,例如Vue.js中的Vuex。...

  • Flux学习笔记

    Flux从提出到现在先先后后看了好多次,看官方demo的时候感觉有些理解,过后又说不出个一二,所以今天抽空从项目目...

  • 前端面试之MVVM 和 Vue

    ++本文系慕课网学习笔记++ 如何理解 MVVM 如何实现 MVVM 是否解读过 vue 的源码(vue 中的 x...

  • vue.js源码学习笔记

    参考:vue.js官网Vue.js 源码学习笔记Vue2.0源代码阅读 文件结构梳理 整体目录 源代码实现目录 模...

  • Vue原理研究之双向数据绑定

    前言 本篇文章主要研究Vue的双向数据绑定的学习笔记。具体细节请参考《剖析Vue原理&实现双向绑定MVVM》。 原...

  • React Native Flux框架的使用

    React Native Flux框架的使用 Flux是RN比较常用的框架,用起来相对比较简单和方便。Flux实现...

  • 03|从Flux到Redux

    单向数据流始祖 Flux Flux理念的一个更强实现Redux 结合React和Redux 01|Flux 从Fl...

  • Flutter数据管理flutter_redux详解

    Flux Redux是Flux思想的另一种实现方式。Flux是和React同时面世的。React用来替代jQuer...

  • vue学习笔记(2)——基础设置

    githubvue学习笔记(1)主要介绍vue项目的创建vue学习笔记(3)主要介绍vue的router简单用法对...

网友评论

    本文标题:学习笔记《Vue 的 Flux 实现》

    本文链接:https://www.haomeiwen.com/subject/zytqtxtx.html