閱讀438 返回首頁    go 阿裏雲 go 技術社區[雲棲]

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應用提供了極其便利的開發體驗。更酷的是，甚至可以用它來做為靜態站生成器

最後更新：2017-09-16 16:04:01

  上一篇：go  老板叫你做個網站怎麼辦？
  下一篇：go  【問題集錦】CDN版十萬個為什麼，常見問題持續更新中......