記一次 Vue 復(fù)習(xí)實(shí)踐小結(jié)，編碼技術(shù)總得時(shí)不時(shí)拿出來(lái)實(shí)踐一番，不然很多細(xì)節(jié)的東西就會(huì)隨著時(shí)間流逝，并且通過(guò)每一次實(shí)踐你總能發(fā)現(xiàn)一些自己之前沒(méi)有注意到的知識(shí)點(diǎn)，加深自己對(duì)一門(mén)語(yǔ)言或者框架的理解。

話(huà)不多說(shuō)，讓我們開(kāi)始吧。

理清 Vue 屬性相關(guān)

我一直分不清，Vue 對(duì)象的屬性哪些是函數(shù)，哪些是對(duì)象，以至于自己在用的時(shí)候相當(dāng)混亂，借這次實(shí)踐，我把系統(tǒng)歸類(lèi)了一下，也算一個(gè)小結(jié)：

單獨(dú)講一講 data 屬性

在下面這種方式創(chuàng)建 Vue 對(duì)象時(shí)，因?yàn)樵搶?duì)象不會(huì)被復(fù)用，所以 data 的寫(xiě)法既可以寫(xiě)成返回一個(gè)對(duì)象，也可以寫(xiě)成返回一個(gè)函數(shù)

// 方式一： var vm = new Vue({data: { a: 1 } }) // 方式二： var vm = new Vue({data: function() {return {a: 1};} }); // 方式三： var vm = new Vue({data() {return {a: 1};} }); 復(fù)制代碼

其中，方式三是方式一的語(yǔ)法糖。

如果，Vue 是使用 Vue.extend() 的形式或者 .vue 文件的形式創(chuàng)建，data 屬性必須是采用上面的二，三的寫(xiě)法，返回一個(gè)函數(shù)。因?yàn)榭赡茉诙嗵幷{(diào)用這個(gè)自定義的組件，所以為了不讓多處的組件共享同一 data 對(duì)象，只能返回函數(shù)。

其他常用屬性匯總

數(shù)據(jù)相關(guān)：

props: Array<string> | Object

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

methods: { [key: string]: Function }

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

生命周期鉤子相關(guān)

created: Function

mounted: Function

updated: Function

destroyed: Function

資源相關(guān)

components: Object

擴(kuò)展組合相關(guān)

mixins: Array<Object>

Vue 實(shí)現(xiàn)一個(gè)經(jīng)典的需求

從可以滾動(dòng)的列表點(diǎn)擊某一列進(jìn)入詳情頁(yè)面再返回并能記住列表滾動(dòng)位置是一個(gè)相當(dāng)經(jīng)典的需求了。下面是具體實(shí)現(xiàn)步驟。

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

有針對(duì)的 keep-alive, 通過(guò)在路由定義的地方設(shè)置 meta，控制當(dāng)前的 view 是否要進(jìn)行 keep-alive, 很顯然，詳情頁(yè)面不用 keep-alive， 而列表由于做了分頁(yè)，如果用戶(hù)點(diǎn)擊回退，那么應(yīng)該還是保留 View，提高用戶(hù)體驗(yàn)。

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 復(fù)制代碼

定義 Router:

export default new Router({routes: [{path: '/feedback',name: 'feedback',component: FeedBack,meta: { title: '用戶(hù)反饋', scrollToTop: true, keepAlive: false },},{path: '/about',name: 'about',component: About,meta: { title: '關(guān)于我們', scrollToTop: true, keepAlive: false },},], }); 復(fù)制代碼

2. 使用 Vuex 做一個(gè)全局變量記錄滾動(dòng)位置

使用 Vuex 記錄滾動(dòng)位置，在 router 的鉤子函數(shù)中做文章：

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: {}, }); 復(fù)制代碼

3. 實(shí)現(xiàn) Router 鉤子函數(shù)部分邏輯

Router 鉤子函數(shù)部分的邏輯：

router.beforeEach(function(to, from, next) {// 要離開(kāi)頁(yè)面如果設(shè)置為不滾回到頂部，則本頁(yè)是要記住上滾動(dòng)高度到vuex中，以便下次進(jìn)來(lái)恢復(fù)高度if (from.meta.scrollToTop == false) {store.commit('recordScrollTop', document.documentElement.scrollTop);}next(); }); router.afterEach((to, from) => {// 如果進(jìn)入后的頁(yè)面是要滾動(dòng)到頂部，則設(shè)置scrollTop = 0// 否則從vuex中讀取上次離開(kāi)本頁(yè)面記住的高度，恢復(fù)它if (to.meta.scrollToTop == true) {setTimeout(() => {document.documentElement.scrollTop = 0;}, 10);} else {setTimeout(() => {document.documentElement.scrollTop = store.state.scrollTop;}, 50);} }); 復(fù)制代碼

最后，記錄一個(gè)經(jīng)典的頁(yè)面布局的實(shí)現(xiàn)方式

有這么一個(gè)需求，界面分頭部，中間內(nèi)容，底部三個(gè)部分，現(xiàn)在需要實(shí)現(xiàn)這么一個(gè)效果：中間內(nèi)容沒(méi)有撐滿(mǎn)一屏剩下部分的時(shí)候，底部固定在底部，如果撐滿(mǎn)了一屏剩下的部分，底部跟著在下面可以滾動(dòng)。

現(xiàn)在可以通過(guò) flex 完美實(shí)現(xiàn)這個(gè)效果，并且 flex 屬性已經(jīng)被大部分瀏覽器兼容，可以放心使用。

實(shí)現(xiàn)方式：

最外層容器布局

/* 設(shè)置父元素為flex布局 */ display: flex; /* 設(shè)置子元素的排列方向 */ flex-direction: column; /* 設(shè)置子元素在該方向上的對(duì)齊方式 */ justify-content: space-between; 復(fù)制代碼

中間層布局

flex:1; 復(fù)制代碼

底部布局

flex:none; 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的Vue 实践小结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。