vue.js生命周期学习及better-scroll在其中的应用

生命周期

---

better-scroll插件的应用

better-scroll 的滚动原理

那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常

有的时候初始化之后不好使是因为你初始化的时候可能Dom还没有被撑开(因为我们获取数据往往是异步获取，当Dom渲染完毕后数据可能还未被调用到)，所以核心还是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 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。

这里的 this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，感兴趣的同学可以了解一下它的内部实现细节，底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 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 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll(就个人理解使用created时候可能会更加提升效率，因为请求数据是个异步过程，等到请求到的数据时候DOM已经被渲染（vue本身就是数据驱动，异步加载所以未等created下获取到数据，dom已经加载好)。而mouted是Dom渲染后才开始请求，这样就会降低了效率！）

为什么使用thie.$nextTick 因为我们需要在数据渲染后，Dom完成重新的渲染后在进行初始化！

数据的动态更新

better-scroll中文文档