vue规模化-阿里云开发者社区

开发者社区> 开发与运维> 正文

vue规模化

简介:

路由

官方路由

对于大多数单页面应用,都推荐使用官方支持的 vue-router 库

从零开始简单的路由

如果只需要非常简单的路由而不需要引入整个路由库,可以动态渲染一个页面级的组件像这样:

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
  '/': Home,
  '/about': About
}
new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

结合HTML5 History API可以建立一个非常基本但功能齐全的客户端路由器

整合第三方路由

如果有非常喜欢的第三方路由,如 Page.js 或者 Director,整合很简单

状态管理

类Flux状态管理的官方实现

由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue提供vuex:我们有受到Elm启发的状态管理库。vuex甚至集成到vue-devtools,无需配置即可访问时光旅行

React的开发者可参考以下信息

来自React 的开发者,可能会对Vuex和Redux间的差异表示关注,Redux是React生态环境中最流行的Flux实现。Redux事实上无法感知视图层,所以它能够轻松的通过一些简单绑定和Vue一起使用。Vuex区别在于它是一个专门为Vue应用所设计。这使得它能够更好地和Vue进行整合,同时提供简洁的API和改善过的开发体验

简单状态管理起步使用

经常被忽略的是,Vue应用中原始数据对象的实际来源--当访问数据对象时,一个Vue实例只是简单的代理访问。所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享:

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

现在当sourceOfTruth发生变化,vmA和vmB都将自动的更新引用它们的视图。子组件们的每个实例也会通过this.$root.$data去访问。现在我们有了唯一的实际来源,但是,任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的记录。为了解决这个问题,采用一个简单的store模式:

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

需要注意,所有store中state的改变,都放置在store自身的action中去管理。这种集中式状态管理能够被更容易地理解哪种类型的mutation将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个log记录bug之前发生了什么。此外,每个实例/组件仍然可以拥有和管理自己的私有状态:

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

重要的是,不应该在action中替换原始的状态对象--组件和store需要引用同一个共享对象,mutation才能够被观察

接着我们继续延伸约定,组件不允许直接修改属于store实例的state,而应执行action来分发(dispatch)事件通知store去改变,最终达成了Flux架构。这样约定的好处是能够记录所有store中发生的state改变,同时实现能做到记录变更(mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具

服务端渲染

SSR完全指南

在2.3发布后我们发布了一份完整的构建Vue服务端渲染应用的指南。这份指南非常深入,适合已经熟悉Vue, webpack和Node.js开发的开发者阅读

Nuxt.js

从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目Nuxt.js让这一切变得非常简单。Nuxt是一个基于Vue生态的更高层的框架,为开发服务端渲染的Vue应用提供了极其便利的开发体验。更酷的是,甚至可以用它来做为静态站生成器

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章