基於Vue Composition API開發一個音樂App遇到的一些問題

前言

最近一直在學習如何使用Vue Composition Api，事實是自己的Vue Options Api掌握的也不是很熟練，因此開發過程中還是出現了很多問題，在此記錄一下。

Better-Scroll

首先是和Vue關係不大的移動端滾動神器，原理很簡單，我們讓父容器寬高小一點，子容器寬高大一點，這樣子容器就能在父容器內滾動了。

對於VCA，我們往往需要拿到Ref，並在nextTick中處理，寫法如下：

  <div ref="wrapper">
    <slot></slot>
  </div>

  setup(props, { root }) {
    const wrapper = ref(null);
    let scroll = null;
    onMounted(() => {
      root.$nextTick(() => {
        _initScroll();
      });
    });
    function _initScroll(){
        scroll = new Bscroll(wrapper.value, {
        // options
      });
    }
    return {wrapper}
  }

個人在寫的時候更喜歡用reactive，只有拿到Dom的時候纔去使用Ref，主要是Ref使用時很容易忘記或者多了value。而且reactive寫起來往往更方便，很多時候一個list.value往往不知道你的value值到底是什麼，而reactive數據結構的鍵就可以隨心所欲了，list.singerList就非常明瞭了。

響應式的數據一定要返回出去，這一點忘記的話還是很尷尬的。

不用返回的方法習慣用_開頭，這一點見仁見智，同時我們返回的方法我們可以在父組件中拿到再進行調用，比如在父組件中拿到子組件並打印它的value。

ref: ƒ ref(raw)
wrapper: div.scroll-provider
refresh: ƒ refresh()

再有一點就是使用Better-scroll的Slider功能，安裝了一下第二版的，好像沒有看到類似第一版本的Slider，因此又返回去安裝了第一版的。

      bscroll = new Bscroll(slider.value, {
        scrollX: true,
        scrollY: true,
        momentum: false,
        click: true,
        snap: {
          loop: true,
          threshold: 0.3,
          speed: 400,
        },

總體設置還是很方便的。

同時關於自動播放，我們設置一個定時器即可，使用的API是slider.next()，監聽scrollEnd事件，然後調用這個方法即可。注意在組件銷燬時清除定時器。

vue-lazyload

之前用過React-lazyload，Vue這款更加方便：

Vue.use(LazyLoad, {
  loading: require("./assets/image/default.png"),
});

隨後在需要的地方：

 <img
    v-lazy="song.imgurl"
    :alt="song.dissname"
    width="133"
    height="133"
  />

Vue-Router

Vue的路由沒有系統去看文檔，用起來比React要簡單很多，使用的也比較簡單，貼幾段代碼：

const routes = [
  {
    path: "/",
    redirect: "/recommend",
  },
  {
    path: "/recommend",
    name: "recommend",
    component: Recommend,
  },
  {
    path: "/rank",
    name: "rank",
    component: () => import("../views/rank.vue"),
  }
]

對比

與React對比，首先是很多地方都方便了很多，比如keep-alive保存狀態，這在React中要麻煩很多。然後是插件，拿懶加載來說，也是要方便很多的。

當然使用的越簡單，深入起來學習成本也是越高的，這一點有利有弊。

和原來的寫法相比沒有感覺到很大的不同，沒了this當然還是皆大歡喜，可能更多特性還要等項目複雜度和API的熟練度上來再說。