生命周期
better-scroll插件的應(yīng)用
better-scroll 的滾動原理
那么晓折，當 content 的高度不超過父容器的高度，是不能滾動的盏袄，而它一旦超過了父容器的高度崔拥，我們就可以滾動內(nèi)容區(qū)了，這就是 better-scroll 的滾動原理涵亏。
better-scroll 的初始化時機很重要，因為它在初始化的時候蛆楞，會計算父元素和子元素的高度和寬度溯乒，來決定是否可以縱向和橫向滾動夹厌。因此豹爹，我們在初始化它的時候，必須確保父元素和子元素的內(nèi)容已經(jīng)正確渲染了矛纹。如果子元素或者父元素 DOM 結(jié)構(gòu)發(fā)生改變的時候臂聋，必須重新調(diào)用 scroll.refresh() 方法重新計算來確保滾動效果的正常
有的時候初始化之后不好使是因為你初始化的時候可能Dom還沒有被撐開(因為我們獲取數(shù)據(jù)往往是異步獲取，當Dom渲染完畢后數(shù)據(jù)可能還未被調(diào)用到)或南，所以核心還是content與父容器間的大小問題孩等！
在 Vue 中使用 better-scroll
```
? import BScroll from 'better-scroll'
? export default {
? ? mounted() {
? ? ? this.$nextTick(() => {
? ? ? ? this.scroll = new Bscroll(this.$refs.wrapper, {})
? ? ? })
? ? }
? }
```
Vue.js 提供了我們一個獲取 DOM 對象的接口—— vm.$refs。在這里采够，我們通過了 this.$refs.wrapper訪問到了這個 DOM 對象肄方，并且我們在 mounted 這個鉤子函數(shù)里，this.$nextTick 的回調(diào)函數(shù)中初始化 better-scroll 蹬癌。因為這個時候权她，wrapper 的 DOM 已經(jīng)渲染了，我們可以正確計算它以及它內(nèi)層 content 的高度逝薪，以確保滾動正常隅要。
這里的 this.$nextTick 是一個異步函數(shù)，為了確保 DOM 已經(jīng)渲染董济，感興趣的同學(xué)可以了解一下它的內(nèi)部實現(xiàn)細節(jié)步清，底層用到了 MutationObserver 或者是 setTimeout(fn, 0)。其實我們在這里把 this.$nextTick 替換成 setTimeout(fn, 20) 也是可以的（20 ms 是一個經(jīng)驗值虏肾，每一個 Tick 約為 17 ms）廓啊，對用戶體驗而言都是無感知的。
```
? ?import BScroll from 'better-scroll'
? export default {
? ? data() {
? ? ? return {
? ? ? ? data: []
? ? ? }
? ? },
? ? created() {
? ? ? requestData().then((res) => {
? ? ? ? this.data = res.data
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.scroll = new Bscroll(this.$refs.wrapper, {})
? ? ? ? })
? ? ? })
? ? }
? }
```
為什么這里在 created 這個鉤子函數(shù)里請求數(shù)據(jù)而不是放到 mounted 的鉤子函數(shù)里封豪？因為 requestData 是發(fā)送一個網(wǎng)絡(luò)請求谴轮，這是一個異步過程，當拿到響應(yīng)數(shù)據(jù)的時候撑毛，Vue 的 DOM 早就已經(jīng)渲染好了书聚，但是數(shù)據(jù)改變 —> DOM 重新渲染仍然是一個異步過程唧领，所以即使在我們拿到數(shù)據(jù)后，也要異步初始化 better-scroll(就個人理解使用created時候可能會更加提升效率雌续，因為請求數(shù)據(jù)是個異步過程斩个，等到請求到的數(shù)據(jù)時候DOM已經(jīng)被渲染（vue本身就是數(shù)據(jù)驅(qū)動，異步加載所以未等created下獲取到數(shù)據(jù)驯杜，dom已經(jīng)加載好)受啥。而mouted是Dom渲染后才開始請求，這樣就會降低了效率８胄摹）
為什么使用thie.$nextTick 因為我們需要在數(shù)據(jù)渲染后滚局，Dom完成重新的渲染后在進行初始化！
