import { ref, onMounted } from "@vue/composition-api";
setup(props, { attrs, slots, parent, root, emit, refs }) {
const mySwiper = ref(null);
onMounted(() => {
// 通过mySwiper.value 即可获取到DOM对象！
// 同时也可以使用vue2.x中的refs.mySwiper ，他其实mySwiper.value 是同一个DOM对象！
mySwiper.value.swiper.slideTo(3, 1000, false);
});
return {
mySwiper
}
}reactive
reactive() 函数接收一个普通对象，返回一个响应式的数据对象，等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象Observer，ref中我们一般存放的是基本类型数据，如果是引用类型的我们可以使用reactive函数。
当reactive函数中，接收的类型是一个Array数组的时候，我们可以在这个Array外面在用对象包裹一层，然后给对象添加一个属性比如：value（这个属性名你可以自己随便叫什么），他的值就是这个数组！
<script>
// 使用相关aip之前必须先引入
import { ref, reactive } from "@vue/composition-api";
export default {
name: "home",
setup(props, { attrs, slots, parent, root, emit, refs }) { const active = ref("");
const timeData = ref(36000000);
// 将tabImgs数组中每个对象都变成响应式的对象
const tabImgs = reactive({
value: [] });
const ball = reactive({
show: false,
el: ""
});
return {
active,
timeData,
tabImgs,
...toRefs(ball),
};
}
};
</script>
那么在template模版中我们想要访问这个数组的时候就是需要使用.value的形式来获取这个数组的值。
<template>
<div class="swiper-cls">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(img ,index) in tabImgs.value" :key="index">
<img class="slide_img" @click="handleClick(img.linkUrl)" :src="img.imgUrl" />
</swiper-slide>
</swiper>
</div>
</template>isRef
isRef() 用来判断某个值是否为 ref() 创建出来的对象；当需要展开某个可能为 ref() 创建出来的值的时候，可以使用isRef来判断！
import { isRef } from '@vue/composition-api'setup(){
const headerActive = ref(false);
// 在setup函数中，如果是响应式的对象，在访问属性的时候，一定要加上.value来访问！
const unwrapped = isRef(headerActive) ? headerActive.value : headerActive
return {}
}
toRefs
toRefs函数会将响应式对象转换为普通对象，其中返回的对象上的每个属性都是指向原始对象中相应属性的ref，将一个对象上的所有属性转换成响应式的时候，将会非常有用！
