vue總結

條件渲染 v-if vs v-show

• v-show 要切換顯示內容，初始化開銷大

• v-if 根據狀態只顯示某個內容，狀態切換機率小，切換開銷大

• 使用key管理可複用的元素（好比切換登陸方式，不一樣方式登陸內容是同樣的），速度快

<tab v-model="index">
// 根據index切換顯示不一樣內容
</tab>
<div>
  // 根據index顯示不一樣的數據（組件內部根據外面的提供的狀態獲取數據）
  <div class="item">
    // 這裏將v-show改成v-if切換tab並無執行拉取數據
    <div v-show="index === 0">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'unpaid'">
      </user-trip-item>
    </div>
    <div v-show="index === 1">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'planned'">
      </user-trip-item>
    </div>
    <div v-show="index === 2">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'not_reviewed'">
      </user-trip-item>
    </div>
    <div v-show="index === 3">
      <user-trip-item 
        @setHasContent="setHasContent"
        :name="'completed'">
      </user-trip-item>
    </div>
  </div>
</div>
// 子組件
// 根據不一樣的狀態獲取按鈕的文字並執行不一樣的方法，這裏能夠用到表驅動法分發事件
<div >
  <div class="trip__list" v-for="(item, index) in items">
    <img 
      @click="toOrderDetail(item.orderNumber)"
      class="cover" 
      :src="item.coverPicture">
    <span class="flag">{{item.stateLabel}}</span>
    <div class="info">
      <h3 
        @click="toPorductDetail(item.productId)"
        class="title">{{item.productTitle}}</h3>
      <p class="date">{{item.startTime}}</p>
      <div class="info__bt">
        <span class="price">{{item.currency}}{{item.orderAmount}}</span>
        <span
          @click="dispatchEvent(item.state, item)"
          class="status"
          v-if="statusText[item.state] !== ''">{{statusText[item.state]}}</span>
      </div>
    </div>
  </div>
</div>

表驅動法

http://note.youdao.com/notesh... 《代碼大全2》表驅動法

vue編寫可複用組件

http://note.youdao.com/notesh... 登陸模塊
通常某個內容重複使用3次以上就要考慮寫成可複用組件了，可複用組件須要定義一個清晰的公開接口

• 數據獲取 能夠經過父組件props或者某種狀態標示子組件內部去拉數據

• 改變外部內容event($on、$emit) 能夠經過向外暴露方法內部$emit()觸發執行

• 插槽slot預留空間給外部顯示額外的自定義內容

組件緩存 keep-alive

keep-alive主要用於保留組件狀態或避免從新渲染，include、exclude屬性容許組件有條件的緩存

疑問：如何設置路由部分組件緩存？

<keep-alive>
  // 路由切換的時候會從新渲染拉取數據，好比當地人中心設置語言成功後回到編輯頁，從新拉取數據而沒有保存語言選擇的內容
  <router-view></router-view>
</keep-alive>
// 改成便可
<keep-alive>
  <router-view></router-view>
</keep-alive>

路由導航 router

// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 由於當鉤子執行前，組件實例還沒被建立
beforeRouteEnter (to, from, next) {
  next(vm => {
    vm.languages = to.query.languages
    vm.defaultLang = to.query.defaultLang
    vm.setLanguageList()
  })
}

beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調用
// 能夠訪問組件實例 `this`
// 設置next(isSave)，false來禁止用戶在還未保存修改前忽然離開，true則不由止，能夠設置一個變量來監聽用戶是否填寫了信息從而是否禁用導航
}

// 編程式導航 帶參數的路由（能夠經過路由傳遞和更改數據）
// 傳遞參數給子路由
<div @click="toPath('/profile/modifyLanguage')"></div>
toPath (path) {
    this.$router.push({
      path: path,
      query: {
        languages: this.languages,
        defaultLang: this.oData.systemLanguages
      }
    })
  }
beforeRouteEnter (to, from, next) {
  next(vm => {
    if (from.path === '/profile/modifyLanguage') {
      vm.languages = to.query.languages // 獲取子路由傳過來的數據
    }
    if (from.path === '/') {
      if (vm.userRole === 1) {
        vm.getProfile('user')
      } else {
        vm.getProfile('guide')
      }
    }
  })
}
// 子路由傳遞數據給父路由
methods: {
  saveLanguage () {
    this.$router.push({ 
      path: '/profile',
      query: { // 傳遞數據給父路由（把語言傳過去）
        languages: this.getSaveData()
      }
    })
  }
}
beforeRouteEnter (to, from, next) {
  next(vm => { // 獲取父路由傳遞過來的數據
    vm.languages = to.query.languages 
    vm.defaultLang = to.query.defaultLang
    vm.setLanguageList()
  })
}

transition 實現各類動畫效果

http://cn.vuejs.org/v2/guide/... 過渡效果transition的設置
http://cn.vuejs.org/v2/guide/... 過渡狀態 各類複雜的效果