vue3-组合式API

最新推荐文章于 2024-05-18 08:00:00 发布
最新推荐文章于 2024-05-18 08:00:00 发布
阅读量1k 收藏 2
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39105508/article/details/116519171
版权

前段时间学习之后总结的，最近有空码上来，过程中参考了别人的文章，总结错了请指出。

文章目录

Vue 3.0 中文文档仓库

诞生缘由

在 Vue2 中，随着功能的增长，复杂组件的代码变得越来越难以理解和维护。为解决这个问题，在vue3中引入了Composition API也称为组合式API，用于提取和重用多个组件之间的逻辑。

vue2.0与vue3.0区别

  1. 数据的双向绑定。
    Vue2.0使用Object.defineProperty ，Vue 3.0使用ES6的新特性porxy。
    1. defineProperty性能比proxy差
    2. defineProperty只能监听单一属性，需要把对象遍历一遍进行监听， proxy可以劫持整个对象。
  2. 完全ts支持。
    3.0用ts重写，可使用ts强大的类型系统、类型提示。
  3. 兼容vue2.0。
  4. 性能快1~2倍。
    1. diff算法优化：引入了静态标记。当数据发生改变需要与之前的虚拟节点对比时，会通过静态标记进行对比。
    2. 静态提升：2.0中无论元素是否参与更新，每次渲染时都会重建，3.0中使用了静态提升，对于不参与更新的元素，只会被创建一次，在渲染时直接复用。
    3. porxy的使用。
  5. 更先进的组件。
    例如fragment组件更简单，有一个虚拟的父级，不再限制最外层只有一个节点。
  6. 组合式API-Composition API。
    类似React的Hooks。
    2.0的Options API代码组织不灵活：
    在 props 里面设置接收参数。
    在 data 里面设置变量。
    在 computed 里面设置计算属性。
    在 watch 里面设置监听属性。
    在 methods 里面设置事件方法。

一、setup

简介

  • setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。

调用时机

  1. 创建组件实例，然后初始化props，然后调用setup函数。
  2. 从生命周期钩子的视角来看，它会在beforeCreate钩子之前被调用。

使用

  1. 如果setup返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文。
  2. 如果setup返回一个函数，也可以使用其中的响应式数据。
<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  props: {
    msg: String,
    default: () => ""
  },
  setup() {
    const count = 0;
    return { count };
    //return () => h("div", [count.value]);
  }
};
</script>

注意：

  1. 不用ref来定义count的初始值，在使用过程中无法响应式操作。
  2. setup()中this是undefined。
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="addCount">增加</button>
  </div>
</template>
<script>
export default {
  name: "App",
  setup() {
    let count = 0;
    function addCount() {
      console.log(count);
      count += 1;
    }
    return { count, addCount };
  }
};
</script>

二、ref

简介

  • ref()函数用来根据给定的值创建一个响应式的数据对象，ref()函数调用的返回值是一个对象，这个对象上只包含一个value属性。

使用

  • 作为响应式数据对象。
<template>
  <div>{{ count }}</div>
  <button @click="addCount">增加</button>
</template>
<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const count = ref(0);
    function addCount() {
      console.log(count.value);
      count.value += 1;
    }
    return { count, addCount };
  }
};
</script>
  • 调用原生DOM
<template>
  <div ref="divBox">ref的调用用法</div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const divBox = ref(null);
    onMounted(() => {
      const dom = divBox.value;
      console.log("dom", dom);
      console.log("parentElement", dom.parentElement);
    });
    return {
      divBox
    };
  }
};
</script>

注意：

  • 这里的onMounted与vue2中的mounted是一样的，是vue3的生命周期新用法。
    在这里插入图片描述

三、reactive

简介

  • reactive函数和ref作用非常接近，但是它的参数必须是一个对象。

使用

<template>
  <div>{{ state.age }}</div>
  <button @click="change">改变</button>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const state = reactive({
      age: 18
    });
    function change() {
      state.age = 20;
    }
    return {
      state,
      change
    };
  }
};
</script>

注意：

  • reactive中传递的参数必须是json对象或者数组，如果传递了其他对象（比如new Date()），在默认情况下修改对象，界面不会自动更新，如果也需要具有响应式，可以通过重新赋值的方式实现。

不会改变的情况：

<template>
  <div>{{ state.time }}</div>
  <button @click="change">改变</button>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const state = reactive({
      time: new Date()
    });
    function change() {
      state.time.setDate(state.time.getDate() + 1);
      console.log(state.time);
    }
    return {
      state,
      change
    };
  }
};
</script>

会改变的情况：

<template>
  <div>
    <p>{{ state.time }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const state = reactive({
      time: new Date()
    });
    function change() {
      const newTime = new Date(state.time);
      newTime.setDate(state.time.getDate() + 1);
      state.time = newTime;
      console.log(state.time);
    }
    return { state, change };
  }
};
</script>

四、ref与reactive认识

  1. ref本质是reactive，当我们给ref传递一个值后，ref函数底层会自动把ref转换成reactive，例如：

    ref(18) -> reactive({value: 18})

  2. 在template模板里面，ref会自动加上.value, 但是如何判断的呢？

    1. 打印ref对象会发现，ref对象里面有一个私有属性__v_isRef: true，有这个属性就自动添加.value。
    2. 我们可以用isRef()、isReactive()来判断是什么类型。

    初始化代码：

    <template>
  <div>
    <p>{{ count }}</p>
    <button @click="addRef">加ref</button>
    <p>{{ state.age }}</p>
    <button @click="addReactive">加reactive</button>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const count = ref(0);
    function addRef() {
      count.value++;
      console.log("count", count);
    }
    const state = reactive({
      age: 18
    });
    function addReactive() {
      state.age++;
      console.log("state", state);
    }
    return { count, addRef, state, addReactive };
  }
};
</script>

    代码提取：

    <template>
  <div>
    <p>{{ count }}</p>
    <button @click="addRef">加ref</button>
    <p>{{ state.age }}</p>
    <button @click="addReactive">加reactive</button>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
function addRef_() {
  const count = ref(0);
  function addRef() {
    count.value++;
    console.log("count", count);
  }
  return { count, addRef };
}
function addReactive_() {
  const state = reactive({
    age: 18
  });
  function addReactive() {
    state.age++;
    console.log("state", state);
  }
  return { state, addReactive };
}
export default {
  name: "HelloWorld",
  setup() {
    const { count, addRef } = addRef_();
    const { state, addReactive } = addReactive_();
    return { count, addRef, state, addReactive };
  }
};
</script>

    isRef()、isReactive()的使用：

    <template>
  <div>
    <p>{{ count }}</p>
    <button @click="addRef">加ref</button>
    <p>{{ state.age }}</p>
    <button @click="addReactive">加reactive</button>
  </div>
</template>
<script>
import { ref, reactive, isRef, isReactive } from "vue";
function addRef_() {
  const count = ref(0);
  function addRef() {
    count.value++;
    console.log("isRef", isRef(count));
    console.log("isReactive", isReactive(count));
  }
  return { count, addRef };
}
function addReactive_() {
  const state = reactive({
    age: 18
  });
  function addReactive() {
    state.age++;
    console.log("isReactive", isReactive(state));
    console.log("isRef", isRef(state));
  }
  return { state, addReactive };
}
export default {
  name: "HelloWorld",
  setup() {
    const { count, addRef } = addRef_();
    const { state, addReactive } = addReactive_();
    return { count, addRef, state, addReactive };
  }
};
</script>

五、递归监听

  • 默认情况下，无论ref还是reactive都是递归监听。

验证reactive:

<template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { reactive } from "vue";
function changeReactive_() {
  const state = reactive({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.a = "1";
    state.a1.b = "2";
    state.a1.b1.c = "3";
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeReactive_();
    return { state, change };
  }
};
</script>

验证ref:

<template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { ref } from "vue";
function changeRef_() {
  const state = ref({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.value.a = "1";
    state.value.a1.b = "2";
    state.value.a1.b1.c = "3";
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeRef_();
    return { state, change };
  }
};
</script>

六、非递归监听

  • shallowReactive()

    <template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { shallowReactive } from "vue";
function changeReactive_() {
  const state = shallowReactive({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.a = "1";
    state.a1.b = "2";
    state.a1.b1.c = "3";
    console.log(state);
    console.log(state.a1);
    console.log(state.a1.b1);
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeReactive_();
    return { state, change };
  }
};
</script>

  • shallowRef()

    • 不可递归：
    <template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { shallowRef } from "vue";
function changeReactive_() {
  const state = shallowRef({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.value.a = "1";
    state.value.a1.b = "2";
    state.value.a1.b1.c = "3";
    console.log(state);
    console.log(state.value.a1);
    console.log(state.value.a1.b1);
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeReactive_();
    return { state, change };
  }
};
</script>

    • 可以递归，但有缺陷：只能这样改，无法指定修改

      <template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { shallowRef } from "vue";
function changeReactive_() {
  const state = shallowRef({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.value = {
      a: "1",
      a1: {
        b: "2",
        b1: {
          c: "3"
        }
      }
    };
    console.log(state);
    console.log(state.value.a1);
    console.log(state.value.a1.b1);
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeReactive_();
    return { state, change };
  }
};
</script>

    • 强制修改：

      <template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
import { shallowRef, triggerRef } from "vue";
function changeReactive_() {
  const state = shallowRef({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.value.a1.b1.c = "3";
    triggerRef(state);
    /* state.value.a = "1";
    state.value.a1.b = "2";
    state.value.a1.b1.c = "3"; */
    console.log(state);
    console.log(state.value.a1);
    console.log(state.value.a1.b1);
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeReactive_();
    return { state, change };
  }
};
</script>

    注意:

    • vue3只提供了triggerRef(), 没有提供triggerReactive()，所以使用shallowReactive()无法主动更新界面。
    • shallowRef的本质：
      1. ref(18) -> reactive({value: 18})
2. shallowRef(18) -> shallowReactive({value: 18})

shallowRef、shallowReactive的理解

  1. 在vue2.x中使用defineProperty来实现响应式数据的，在vue3.x中是通过proxy来实现。
  2. 以下代码我是在单独js文件中编写， 编辑器内运行的。
  3. 非源码，实现过程只是为了理解方法的原理

proxy简单实现：

const obj = {
  name: "老大",
  age: 20
};
const state = new Proxy(obj, {
  get(obj, key) {
    console.log("获取", obj[key]);
    return obj[key];
  },
  set(obj, key, value) {
    obj[key] = value;
    console.log("赋值", obj);
    return true;
  }
});
state.name = "老小";

shallowRef()、shallowReactive() 简单实现：

function shallowReactive(obj) {
  return new Proxy(obj, {
    get(obj, key) {
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      console.log(obj);
      console.log("更新UI");
      return true;
    }
  });
}
function shallowRef(val) {
  return shallowReactive({
    value: val
  });
}
const obj = {
  a: "a",
  a1: {
    b: "b",
    b1: {
      c: "c"
    }
  }
};
/* const state = shallowReactive(obj);
state.a = "1";
state.a1.b = "2";
state.a1.b1.c = "3"; */
const state = shallowRef(obj);
state.value = {
  a: "1",
  a1: {
    b: "2",
    b1: {
      c: "3"
    }
  }
};

ref与reactive响应式理解

// let obj = {name: "老大", age: 20}
/* let arr = [
  1,
  {
    name: "老大",
    age: 20
  }
]; */
function reactive(obj) {
  if (typeof obj === "object") {
    if (obj instanceof Array) {
      // 如果是一个数组，那么每个元素是不是对象，是的话咱们是不是需要再把他包装成proxy
      obj.forEach((item, index) => {
        if (typeof item === "object") {
          obj[index] = reactive(item);
        }
      });
    } else {
      // 如果是对象，那么没个属性是不是对象，是的话是不是要把它包装成proxy
      for (let key in obj) {
        const item = obj[key];
        if (typeof item === "object") {
          obj[key] = reactive(item);
        }
      }
    }
    return new Proxy(obj, {
      get(obj, key) {
        return obj[key];
      },
      set(obj, key, value) {
        obj[key] = value;
        // console.log(obj);
        console.log("更新UI");
        return true;
      },
    });
  } else {
    console.log(`${obj}: 不是对象`);
  }
}
function ref(val) {
  return reactive({
    value: val
  });
}
const obj = {
  a: "a",
  a1: {
    b: "b",
    b1: {
      c: "c"
    }
  }
};
/* const state = reactive(obj);
state.a = "1";
state.a1.b = "2";
state.a1.b1.c = "3"; */
const arr = [
  {
    name: "老大",
    age: 20,
  },
  {
    name: "老二",
    age: 18,
  },
];
const state = reactive(arr);
state.push({
  name: "健康",
  age: 1000,
});
console.log(state.length);

放到vue项目中使用:

<template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.a1.b }}</p>
    <p>{{ state.a1.b1.c }}</p>
    <button @click="change">改变</button>
  </div>
</template>
<script>
function reactive(obj) {
  if (typeof obj === "object") {
    if (obj instanceof Array) {
      // 如果是一个数组，那么每个元素是不是对象，是的话咱们是不是需要再把他包装成proxy
      obj.forEach((item, index) => {
        if (typeof item === "object") {
          obj[index] = reactive(item);
        }
      });
    } else {
      // 如果是对象，那么没个属性是不是对象，是的话是不是要把它包装成proxy
      for (const key in obj) {
        const item = obj[key];
        if (typeof item === "object") {
          obj[key] = reactive(item);
        }
      }
    }
    return new Proxy(obj, {
      get(obj, key) {
        return obj[key];
      },
      set(obj, key, value) {
        obj[key] = value;
        // console.log(obj);
        console.log("更新UI");
        return true;
      }
    });
  } else {
    console.log(`${obj}: 不是对象`);
  }
}
function ref(val) {
  return reactive({
    value: val
  });
}
function changeReactive_() {
  const state = reactive({
    a: "a",
    a1: {
      b: "b",
      b1: {
        c: "c"
      }
    }
  });
  function change() {
    state.a = "1";
    state.a1.b = "2";
    state.a1.b1.c = "3";
    console.log(state);
    console.log(state.a1);
    console.log(state.a1.b1);
  }
  return { state, change };
}
export default {
  name: "HelloWorld",
  setup() {
    const { state, change } = changeReactive_();
    return { state, change };
  }
};
</script>
bug菌
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3组合式api
weixin_68658847的博客
04-04 1366
vue3组合式api
Vue3最新的14个常用API
lannieZ的博客
11-27 1435
（1）setup （2）ref setup 函数也是 Compsition API 的入口函数，我们的变量、方法都是在该函数里定义的 <template> <div> <p>{{ msg }}</p> <button @click="change">改变msg的值</button> </div> </template> <script> import { ref } from
Vue3入门-组合式API
qq_45811054的博客
05-18 189
vue3入门基础知识
详细分析Vue3中组合式API（附Demo）
最新发布
码农研究僧的博客
05-18 1060
Vue 3 引入了组合式 API（Composition API），这是一个强大的新功能，与传统的选项式 API（Options API）相比，提供了更灵活、更易于复用的方式来组织和复用代码
VUE3组合式API
Circle_Key的博客
12-14 1661
Vue3组合式API自由理解
vue3常用api梳理
风舞红枫的个人博客
01-26 1135
vue3常用api
Vue3组合式api.xmind
06-16
Vue3组合式api
11_Vue3-Composition-API（二）.pptx
01-25
Vue 3 Composition API 组合式 API 详解 Vue 3 Composition API 是 Vue 3 中的一种新的编程模型，它提供了一种更加灵活和强大的一种方式来构建 Vue 应用程序。Composition API 是对 Options API 的一种补充和改进...
实现基于Vue3组合式API的登陆系统
04-07
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架，是一个构建数据驱动的 web 界面的库。在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。...
vue3源码 vue-next源码
06-09
vue3都出来这么久了，还不学起来等啥呢？组合式api，proxy做数据响应，平台无关的虚拟dom。最新的源码，感觉download学习吧！！学不动的就算了，别勉强
vue3-tailwindcss-datatable
05-27
一切都通过插槽工作使用本地和远程数据（使用您自己的api函数） 响应性强，删除不太重要的数据列以获得较小的断点自动和响应式分页搜索本地和远程数据简单过滤本地和远程布尔值使用自己的导出功能导出数据的简单而...
Vue3 学习笔记：Composition API
baidu_41388533的博客
05-26 192
setup其实就是组件的另外一个选项： 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项； 比如methods、computed、watch、data、生命周期等等； setup函数的参数 主要有两个参数 第一个参数：props 第二个参数：context props它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接通过props参数获取： 对于定义props的类型，我们还是和之前的规则是一样的，在...
vue3常用的API
qq_55928824的博客
03-07 1168
vue3常用的API(ref,reactive,computed,watch)
Vue3 学习笔记 —— （一）深入理解组合式 API
欢迎来到Gorit的博客
04-24 3468
Vue3 组合式 API 学习 1. setup(props, context) 2. 响应式 API：reactive() 、ref()、toRef()、toRefs() 3. 计算属性 computed 和 watch 侦听器的使用 4. 组件化思想
Vue3基础+代码语法+例子大全（八）——组合式API
m0_46610349的博客
10-03 2259
什么是组合式 API ？组合式 API 基础：setup 组件选项、带 ref 的响应式变量、在 setup 内注册生命周期钩子、watch 响应式更改、独立的 computed 属性、Setup、生命周期钩子、依赖注入：Provide / Inject。Vue 单文件、单文件组件
Vue3 组合式API
weixin_52910435的博客
05-12 1052
1. 开发环境搭建 1.1 用vue-cli搭建一个基于vue3.0的开发环境 1.1.1 选择自定义配置 1.1.2 选中自定义安装版本 1.1.3 选择3.x版本 1.2 不同文件 package.json文件，在dependencies配置项中显示，我们当前使用的版本为3.0.0 main.js 入口文件，发现Vue的实例化发生了一些变化，由先前的new关键词实例化，转变为createApp方法的调用形式 打开一个单文件组件发现，vue3.0的单文件组件中不再强制要求必须有唯一根元素 1.3
尝鲜 Vue 3.0 组合式API
Mencre的博客
09-06 2143
Vue 3.0 即将发布，我们已经可以尝试一些新版本中带来的新功能，比如 Composition-API 组合式API。如果你了解过 React 的 Hooks，那么当你看到组合式API时一定不会感到陌生。组合式API受到了 React Hooks 很大的启发。 Vue 非常易于使用，并且有非常出色的 API，对于初学者来说配合官方文档很容易就可以理解 Vue 的语法。但在国内一些大型的项目可能不会首选 Vue 去开发，因为当组件越来越大的时候会变得很难维护，很难找到一个变量在哪被定义又是在哪被使用。Vue
Vue3新特性——Composition API详解
热门推荐
ailsa_csdn的博客
03-01 1万+
本套笔记是学习尚硅谷视频教程所整理
vue3 组件双向绑定的方案
weixin_51897979的博客
12-22 4493
目前在用vue3写项目的时候，当对一个组件进行双向绑定的时候，在子组件中数据发生改变通常要使父组件里面的相应的数据进行同步修改. 1，话不多说针对上述需求，目前主流的方案是 在父组件中用v-model （实则v-model只是一种语法糖写法）绑定相应的值，在子组件中 中利用props中modelValue来接收值，然后我们就可以直接修改modelValue来修改父组件中相应的值, 但是这种做法虽然普遍，但是vue3 props标准是要保持单向数据传递的原则，但是我们能违背这个原则直接改变...
vue3-storage使用组合式示例代码
06-06
以下是一个使用 vue3-storage 组合式 API 的示例代码： ```js import { ref, onMounted } from 'vue' import { useStorage } from 'vue3-storage' export default { setup() { const count = ref(0) // 使用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug菌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值