記一次 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 對象，只能返回函數。

其他常用屬性匯總

數據相關：

props: Array<string> | Object

computed: { [key: string]: Function | { get: Function, set: Function } }

methods: { [key: string]: Function }

watch: { [key: string]: string | Function | Object | Array }

生命周期鉤子相關

created: Function

mounted: Function

updated: Function

destroyed: Function

資源相關

components: Object

擴展組合相關

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; 復制代碼

總結

以上是生活随笔為你收集整理的Vue 实践小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。