基于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的熟练度上来再说。