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;
複製代碼