Vue 實踐小結

小武的知識鋪發表於2019-02-27
Vue

記一次 Vue 複習實踐小結，編碼技術總得時不時拿出來實踐一番，不然很多細節的東西就會隨著時間流逝，並且通過每一次實踐你總能發現一些自己之前沒有注意到的知識點，加深自己對一門語言或者框架的理解。

話不多說，讓我們開始吧。

理清 Vue 屬性相關

我一直分不清，Vue 物件的屬性哪些是函式，哪些是物件，以至於自己在用的時候相當混亂，借這次實踐，我把系統歸類了一下，也算一個小結：

單獨講一講 data 屬性

在下面這種方式建立 Vue 物件時，因為該物件不會被複用，所以 data 的寫法既可以寫成返回一個物件，也可以寫成返回一個函式

// 方式一：
var vm = new Vue({
  data: { a: 1 }
})
// 方式二：
var vm = new Vue({
  data: function() {
    return {
      a: 1
    };
  }
});
// 方式三：
var vm = new Vue({
  data() {
    return {
      a: 1
    };
  }
});
複製程式碼

其中，方式三是方式一的語法糖。

如果，Vue 是使用 Vue.extend() 的形式或者 .vue 檔案的形式建立，data 屬性必須是採用上面的二，三的寫法，返回一個函式。因為可能在多處呼叫這個自定義的元件，所以為了不讓多處的元件共享同一 data 物件，只能返回函式。

其他常用屬性彙總

  1. 資料相關：

    1. props: Array<string> | Object
    2. computed: { [key: string]: Function | { get: Function, set: Function } }
    3. methods: { [key: string]: Function }
    4. watch: { [key: string]: string | Function | Object | Array }

  2. 生命週期鉤子相關

    1. created: Function
    2. mounted: Function
    3. updated: Function
    4. destroyed: Function

  3. 資源相關

    1. components: Object

  4. 擴充套件組合相關

    1. mixins: Array<Object>

Vue 實現一個經典的需求

從可以滾動的列表點選某一列進入詳情頁面再返回並能記住列表滾動位置是一個相當經典的需求了。下面是具體實現步驟。

1. 使用 keep-alive 並定義好 Router

有針對的 keep-alive, 通過在路由定義的地方設定 meta，控制當前的 view 是否要進行 keep-alive, 很顯然，詳情頁面不用 keep-alive， 而列表由於做了分頁，如果使用者點選回退，那麼應該還是保留 View，提高使用者體驗。

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製程式碼

定義 Router:

export default new Router({
  routes: [
    {
      path: '/feedback',
      name: 'feedback',
      component: FeedBack,
      meta: { title: '使用者反饋', scrollToTop: true, keepAlive: false },
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: { title: '關於我們', scrollToTop: true, keepAlive: false },
    },
  ],
});
複製程式碼

2. 使用 Vuex 做一個全域性變數記錄滾動位置

使用 Vuex 記錄滾動位置，在 router 的鉤子函式中做文章：

store.js 程式碼：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    scrollTop: 0,
  },
  mutations: {
    recordScrollTop(state, n) {
      state.scrollTop = n;
    },
  },
  actions: {},
});
複製程式碼

3. 實現 Router 鉤子函式部分邏輯

Router 鉤子函式部分的邏輯：

router.beforeEach(function(to, from, next) {
  // 要離開頁面如果設定為不滾回到頂部，則本頁是要記住上滾動高度到vuex中，以便下次進來恢復高度
  if (from.meta.scrollToTop == false) {
    store.commit('recordScrollTop', document.documentElement.scrollTop);
  }
  next();
});
router.afterEach((to, from) => {
  // 如果進入後的頁面是要滾動到頂部，則設定scrollTop = 0
  // 否則從vuex中讀取上次離開本頁面記住的高度，恢復它
  if (to.meta.scrollToTop == true) {
    setTimeout(() => {
      document.documentElement.scrollTop = 0;
    }, 10);
  } else {
    setTimeout(() => {
      document.documentElement.scrollTop = store.state.scrollTop;
    }, 50);
  }
});
複製程式碼

最後，記錄一個經典的頁面佈局的實現方式

有這麼一個需求，介面分頭部，中間內容，底部三個部分，現在需要實現這麼一個效果：中間內容沒有撐滿一屏剩下部分的時候，底部固定在底部，如果撐滿了一屏剩下的部分，底部跟著在下面可以滾動。

現在可以通過 flex 完美實現這個效果，並且 flex 屬性已經被大部分瀏覽器相容，可以放心使用。

實現方式：

最外層容器佈局

/* 設定父元素為flex佈局 */
display: flex;
/* 設定子元素的排列方向 */
flex-direction: column;
/* 設定子元素在該方向上的對齊方式 */
justify-content: space-between;
複製程式碼

中間層佈局

flex:1;
複製程式碼

底部佈局

flex:none;
複製程式碼

小武的知識鋪

相關文章