最近一直在学习如何使用Vue Composition Api,事实是自己的Vue Options Api掌握的也不是很熟练,因此开发过程中还是出现了很多问题,在此记录一下。
首先是和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事件,然后调用这个方法即可。注意在组件销毁时清除定时器。
之前用过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的路由没有系统去看文档,用起来比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的熟练度上来再说。