关于javascript:🌱-学会vue3的ref-12行代码实现useAxiosGet

ref

ref 是 vue3 新增的 api, 他的意义就是独自定义一个能够”被追踪”的变量, vue2 中所有变量都须要在data中定义, vue3 中减少了一个setup字段, 在这里咱们能够更灵便的定义变量.

vue3

export default defineComponent({
    setup() {
        const countA = ref(1);
        return { count };
    },
});

vue2

export default {
    data() {
        return { countA: 1 };
    },
};

可能有人就问了, 这 vue3 的新 api 益处是什么?

益处就是 js 业务代码能够拆分的更细. 比方下面的例子中的countA, 他是接口返回的数据, 咱们个别状况下申请胜利之前界面都要显示一个”加载动画”, 这个”加载动画”的显示暗藏就须要一个变量管制, 个别咱们起名叫isLoading:

vue2

export default {
    data() {
        return { countA: 1, isLoading };
    },

    async mounted() {
        this.isLoading = true;
        const { data } = await axios.get('/api');
        this.countA = data;
        this.isLoading = false;
    },
};

这是 vue2 的写法, 我置信大家都是这么写的, 看起来应该没什么能够持续封装的了吧? 接下来用 vue3 的refapi 尝试进行封装:

vue3

export default defineComponent({
    setup() {
        const [isLoading, countA] = useGet('/api');
        return { isLoading, countA };
    },
});

export function useGet(url) {
    const isLoading = ref(true);
    const dataSource = ref();
    axios
        .get(url)
        .then(({ data }) => {
            dataSource.value = data;
        })
        .finally(() => {
            isLoading.value = false;
        });
    return [isLoading, dataSource];
}

ref 的语法这里不讲, 只须要晓得isLoading.value=false是给isLoading赋值即可, 更多请看vue 官网文档

这时候咱们发现原本不能形象的场景, 当初也能够形象出一个useGet了,叔数数代码刚12行.

v-use-axios

沿着下面的思路, 我对axios做了一个更残缺的封装, v-use-axios, 代码不多逻辑也不简单, 100行左右, 心愿有趣味的小伙伴能够和我一起欠缺他.

微信群

感激大家的浏览, 如有疑难能够加我微信, 我拉你进入微信群(因为腾讯对微信群的200人限度, 超过200人后必须由群成员拉入)