vue3.0入门 === setup，ref，reactive的基本使用

最新推荐文章于 2024-03-22 13:44:45 发布
最新推荐文章于 2024-03-22 13:44:45 发布
阅读量601 收藏 1
点赞数 1
分类专栏： vue3.0 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49346957/article/details/118386899
版权
  • vue3.0 相比vue2来说性能方面提升了
  • vue3.0更好的兼容了TypeScript语法
  • 增加了许多新特性
    1. Composition (组合) API
    2. setup
    ref 和 reactive
    computed 和 watch
    新的生命周期函数
    provide 与 inject

  1. 新组件
    Fragment - 文档碎片
    Teleport - 瞬移组件的位置
    Suspense - 异步加载组件的 loading 界面
    其它 API 更新

  2. 全局 API 的修改
    将原来的全局 API 转移到应用对象
    模板语法变化

安装

  • vue3的安装及安装选项跟vue2的基本相同

  1. 使用cli创建项目
    安装或者升级

     npm install -g @vue/cli

  2. 注意：保证 vue cli 版本在 4.5.0 以上

  3. 查看版本

    vue --version

  4. 创建项目

  5. my-project是自己定义的项目的名字
    vue create my-project

  6. 安装选项

  • Please pick a preset - 选择 Manually select features
  • Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
  • Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
  • Use class-style component syntax - 直接回车
  • Use Babel alongside TypeScript - 直接回车
  • Pick a linter / formatter config - 直接回车
  • Use history mode for router? - 直接回车
  • Pick a linter / formatter config - 直接回车
  • Pick additional lint features - 直接回车
  • Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
  • Save this as a preset for future projects? - 直接回车
vue3.0中的文件的介绍
  • node_modules: 项目的依赖库
  • public: 公共目录项目开发环境不参与打包构建
  • src 文件夹：我们主要操作的地方，组件的增加修改等都在这个文件夹里操作
  • eslintrc: 配置 eslint 的检测规则，强制按照规则书写代码；
  • gitignore: 指定 git 忽略的文件，所有 git 操作均不会对其生效；
  • babel.config.js：关于babel的相关配置
  • package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。
  • package.json: 指定项目开发和生成环境中需要使用的依赖库；
  • tsconfig.js: 关于typescript的相关配置

src文件的中的文件介绍

  • main.ts:程序主的入口文件
    里面的内容介绍
// 引入createApp函数，创建对应的应用，产生应用的示实例对象
import { createApp } from 'vue'
// 引入App组件（所有组件的父级组件）
import App from './App.vue'
// 创建App引用返回对应的实例对象，调用mount方法进行挂在
createApp(App).mount('#app')
  • 在App.vue中如果出现以下报错
    在这里插入图片描述
    解决方案
    在这里插入图片描述
    App.vue文件介绍
<template>
<!-- vue2中的html模板中必须要有一对根标签，vue3组件中的html模板中可以没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 使用这个子级组件 -->
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
// 这里可以写ts的代码
// defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
import { defineComponent } from 'vue';
// 引入一个子级组件
import HelloWorld from './components/HelloWorld.vue';
// 暴露出去一个定义好的组件
export default defineComponent({
  // 当前组件的名字是App
  name: 'App',
  components: {
    // 注册一个子组件
    HelloWorld
  }
});
</script>

基本使用

Composition中的第一个函数方法

  • setup

  1. 新的 option, 所有的组合 API 函数都在此使用, 只在初始化时执行一次

  2. 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

app.vue代码
这个会在页面上显示 （法外狂徒zs）

<template>
  {{name}}
</template>

<script lang="ts">

import { defineComponent } from 'vue';

// 暴露出去一个定义好的组件
export default defineComponent({
  name: 'App',
  setup(){
      return {
        name:'法外狂徒zs'
      }
  }
});
</script>
  • ref
  1. 作用: 定义一个数据的响应式
  2. 语法: const xxx = ref(initValue):
    创建一个包含响应式数据的引用(reference)对象
    js 中操作数据: xxx.value
    模板中操作数据: 不需要.value
  3. 一般用来定义一个基本类型的响应式数据
    ref和setup的基本使用
<template>
    {{count}}
  <button @click="updataconst">更新数据</button>
</template>

<script lang="ts">
// 这边也要引入ref
import { defineComponent, ref} from 'vue';

// 暴露出去一个定义好的组件
export default defineComponent({
  name: 'App',
  // 实现点击按钮让页面上的数据发生变化
  // vue2.0写法
  // data(){
  //   return{
  //     count:0
  //   }
  // },
  // methods:{
  //   updataconst(){
  //     this.count++
  //   }
  // },
  // vue3.0 写法
// 程序执行会先进入setup函数中
  setup(){
    // let count=0 //此时的数据不是响应式的数据所以页面的数据不会跟着变
    // 给ref一个值
    // ref是一个函数作用是:定义一个响应式数据
    const count=ref(0)
    console.log(count);
    
    function updataconst(){
      // count++这个会报错 :因为count是一个ref对象,对象不能进行++操作
      count.value++
    }
      return {
        // es6语法 调用
        // count:count
        count,
        updataconst
      }
  }
});
</script>
  • reactive
  1. 作用: 定义多个数据的响应式
  2. const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
  3. 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
  4. 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
<template>
    <h3>名字:{{user.name}}</h3>
    <h3>年龄:{{user.age}}</h3>
    <h3>信息:{{user.wife}}</h3>
  <button @click="updataconst">更新数据</button>
</template>

<script lang="ts">
// 这边也要引入ref
import { defineComponent, reactive} from 'vue';

// 暴露出去一个定义好的组件
export default defineComponent({
  name: 'App',
  setup(){
    // 把数据变为响应式数据
    const obj = reactive({
      name:'牛夫人',
      age:'20',
      wife:{
        name:'勇敢牛牛',
        while:"不怕困难"
      }
    })
  //返回的是一个proxy的代理对象,被代理的目标对象就是obj对象
  // user现在是代理对象,obj是目标对象
    const user =reactive(obj)
    console.log(user);
    
    // 方法
    const updataconst=()=>{
      // 直接使用目标对象的方式来更新目标的对象中的值,是不可能的,只能使用代理对象的方式来更新数据(响应式数据)
      // obj.name+='猴子'
      user.name+='呢'
      user.age+='其实是18'
      user.wife.while+='哦耶'
    }
    return{
        user,
        updataconst
    }
  }
});
</script>

vue3.0中响应式数据原理

  • 你可以先创建一个文件夹然后在文件夹中创建一个html文件 ， 下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const user={
             name:'张',
             age:18,
             wife:{
                 name:'王',
                 age:18
             }
        }
        //把目标对象变成代理对象
        // 参数1：user---》target目标对象
        // 参数2：handler---》处理器对象，用来监视数据及数据的操作
        const proxyUser=new Proxy(user,{
            // 获取目标对象的某个值
            get(target,prop){
                console.log('get方法调用了');
                // Reflect中也有一个get对象 他的参数就是get的返回值
                return Reflect.get(target,prop)
            },
            // 修改目标对象的属性/为目标对象添加新的值
            set(target,prop,val){
                console.log('set方法调用了');
                // 这里也需要返回Reflect
                return Reflect.set(target,prop,val)
            },
            // 删除目标对象上的某个属性
            deleteProperty(target,prop){
                console.log('deletef调用了');
                return Reflect.set(target,prop)
            }
        })
        // 通过代理对象来获取目标对象中的某个属性值
        console.log(proxyUser.name);
        // 通过代理对象来更新目标对象上的某个值
        proxyUser.name='我是李呀'
        console.log(user);
        // 通过代理对象向目标对象中添加一个新的属性
        proxyUser.sex='男'
        // 删除
        delete proxyUser.name
        console.log(user);
        // 更新目标对象中的某个属性对象中的属性值
        proxyUser.wife.name='牛夫人'
        console.log(user);
    </script>
</body>
</html>

vue3.0中响应式数据测试

  • 这里是在vue.app中的代码
<template>
    <h3>名字:{{user.name}}</h3>
    <h3>年龄:{{user.age}}</h3>
    <h3>信息:{{user.wife}}</h3>
  <button @click="updataconst">更新数据</button>
</template>

<script lang="ts">
// 这边也要引入ref
import { defineComponent, reactive} from 'vue';

// 暴露出去一个定义好的组件
export default defineComponent({
  name: 'App',
  setup(){
    // 把数据变为响应式数据
    const obj = reactive({
      name:'牛夫人',
      age:'20',
      wife:{
        name:'勇敢牛牛',
        while:"不怕困难"
      }
    })
  //返回的是一个proxy的代理对象,被代理的目标对象就是obj对象
  // user现在是代理对象,obj是目标对象
    const user =reactive(obj)
    console.log(user);
    
    // 方法
    const updataconst=()=>{
      // 直接使用目标对象的方式来更新目标的对象中的值,是不可能的,只能使用代理对象的方式来更新数据(响应式数据)
      // obj.name+='猴子'
      user.name+='呢'
      user.age+='其实是18'
      user.wife.while+='哦耶'
     // 通过代理对象来找到该对象中的某个属性，更改该对象中某个数组的数据
      user.wife.while='你是猪'
      // 通过当前的代理对象把目标对象中的某个数组属性中添加一个新的属性
      user.wife.car[2]='猪3'
    }
    return{
        user,
        updataconst
    }
  }
});
</script>
  • setup 详解
    执行时机
  1. 在 beforeCreate 之前执行(一次), 此时组件对象还没有创建
  2. this 是 undefined, 不能通过 this 来访问 data/computed/methods / props
    实验 以下
    在这里插入图片描述
    父组件代码
<template>

  <h2>我是App父级组件</h2>
  <h3>mes:{{msg}}</h3>
  <button @click="msg+='==='">更新数据</button>
  <!-- 父传子 -->
  <child :msg='msg'/>
</template>

<script lang="ts">
// 这边也要引入ref
import { defineComponent, ref} from 'vue';
// 引入子级组件
import child from './components/child.vue'
// 暴露出去一个定义好的组件
export default defineComponent({
  name: 'App',
  // 注册组件
  components:{
    child
  },
  setup(){
    const msg=ref('我出来了')
    return{
      msg,
    }
  }
});
</script>

子组件代码

<template>
    <h2>我是子组件</h2>
  <h3>msg:{{msg}}</h3>
</template>

<script lang='ts'>
import {defineComponent} from 'vue'
export default defineComponent({
    name:'child',
    // 接收父组件传过来的属性
    // setup是在beforeCreate声明周期回调之前就执行了，而且就执行一次
    // 可以推断出：setup在执行的时候，当前组件还没有创建出来，也就意味着：组件实例对象this更本就不能使用
    props:['msg'],
    // 数据初始化的生命周期
    beforeCreate(){
        console.log('beforeCerate执行了');
        
    },
    setup(){
        //this是undefined说明就不能通过this调用data/computed/methods / props
        console.log('setup执行了',this);
        return {
            // setup中一般都是返回一个对象，对象中的属性和方法都可以在html模板中直接使用
        }
        
    }
})
</script>

返回值

  1. 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
  2. 返回对象中的属性会与 data 函数返回对象的属性合并成为组件对象的属性
  3. 返回对象中的方法会与 methods 中的方法合并成功组件对象的方法
  4. 一般不要混合使用: methods 中可以访问 setup 提供的属性和方法, 但在 setup 方法中不能访问 data 和 methods ：因为ithis是undefined
<template>
  <h2>我是子组件</h2>
  <h3>msg:{{ msg }}</h3>
  <h3>{{ name }}</h3>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({
  name: "child",
  //setup中的返回值是一个对象，为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法

  props: ["msg"],
  // setup 不能是一个 async 函数: 因为返回值不再是 return 的对象, 而是 promise, 模板看不到 return 对象中的属性数据
  setup() {
    const showMsg1 = () => {
      console.log("我是showMsg1");
    };
    return {
      // setup中一般都是返回一个对象，对象中的属性和方法都可以在html模板中直接使用
      showMsg1,
    };
  },
  //setup中的对象中的属性和data函数返回对象的属性合并成为组件对象的属性
  data() {
    return {
      name: "王",
    };
  },
  mounted() {
    console.log(this);
  },
  methods: {
    // setup中的对象中的方法和methods 中的方法合并为组件对象的方法
    // 在vue3中不推荐一起使用 methods ， setup  及 data 和 methods
    // 一般不要混合使用: methods 中可以访问 setup 提供的属性和方法, 但在 setup 方法中不能访问 data 和 methods
    showMsg2() {
      console.log("methods中的showMsg2");
    },
  },
});
</script>

<style>
</style>

参数
setup中有两个参数（props，context）

<template>
  <h2>我是子组件</h2>
  <h3>msg:{{ msg }}</h3>
  <h3>{{ name }}</h3>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({
  name: "child",
  props: ["msg"],
  setup(props,context) {
      console.log(props); //是一个对象，里面有父级组件向子组件传递的参数，并且是在子组件中使用props接收到的所有属性 ，包含props配置声明且传入了的所有属性对象
    // console.log(props.msg);
    
      console.log(context); //是一个对象，里面有attrs对象，emit，slots
    //   attrs：获取当前组件标签上的属性（eg:vue.app中的标签里的mes），但是该属性是在props中没有声明接收的所有的属性对象
    // emit：分发事件
    // slots对象：插槽
    //   console.log(context.attrs); 
    //   console.log(context.emit); 
	}
})

</script>

  • reactive与ref详解

    • reactive 与 ref是 Vue3 的 composition API 中 2 个最重要的响应式 API
    • ref 用来处理基本类型数据, reactive 用来处理对象(递归深度响应式)

app.vue中的代码

<template>
  <h1>m1:{{m1}}</h1>
  <h1>m2:{{m2}}</h1>
  <h1>m3:{{m3}}</h1>
  <button @click="updata">跟新数据</button>
</template>

<script lang="ts">
// 这边也要引入ref
import { defineComponent, reactive, ref} from 'vue';
// 引入子级组件
import child from './components/child.vue'
// 暴露出去一个定义好的组件
export default defineComponent({
  name: 'App',
  setup(){
    // ref 用来处理基本类型数据, reactive 用来处理对象(递归深度响应式)

    // 通过ref的方式设置的数据
    const m1=ref('abc')
    // 通过reactive的方式设置的数据
    const m2=reactive({
      name:'小明',
      wife:{
        name:'小红'
      }
    })
    // ref能传入对象吗
    const m3=ref({
      name:'小明',
      wife:{
        name:'小红'
      }
    })
    // 更新数据
    const updata=()=>{
      // 如果用 ref 对象/数组, 内部会自动将对象/数组转换为 reactive 的代理对象(proxy类型的对象)
      console.log(m3)
      // ref 的数据操作: 在 js 中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
      m1.value+='==='
      m2.wife.name+='==='
      m3.value.wife.name+='==='
      console.log(m3.value.wife);//proxy对象
    }
    return{
      m1,
      m2,
      m3,
      updata
    }
  }
});
</script>

总结：

  • vue3相对vue2来说性能快了1.2-2倍
  • 比如说：
  1. diff方法优化：
    vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
    vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容
  2. 静态提升：
    vue2无论元素是否参与更新，每次都会重新创建然后再渲染
    vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
失う.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
10-20
Web前端Vue2.0 + Vue3.0 全套入门到精通教程
VUE3.0(一)：vue3.0简介
最新发布
chengcheng9876的博客
03-22 1815
VUE3.0(一)：vue3.0简介
Vue（三）条件判断
Good Luck
05-17 321
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--Vue安装--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> &l.
Vue3 setup 在渲染函数中通过ref访问Dom元素
僵小蛋的博客
04-30 7714
Vue3.0 中新增了Composition API , 在使用h函数渲染vnode时，如果需要使用ref, 和 vue2.0中有所不同。 先来看在 Vue3 如何在模版语法中使用ref（options语法中获取ref和2.0版本语法无差异） <template> <div ref="divRef">ref demo</div> </template> <script> import { ref, onMounted } from "vue";
vue3的基本使用(超详细)
m0_64875238的博客
11-05 7901
Vue3 的全面特性的总结 + V2 和 V3 的区别（超详细）
vue.js 两个等号 == 和三个等号 ===的区别
热门推荐
aigoV的博客
09-10 1万+
== 用于比较两者是否相等，忽略数据类型。 === 用于更严谨的比较，值和值的数据类型都需要同时比较。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
vue3 = =
jia632133535的博客
01-03 567
Vue3.0中的生命周期做了一些改动：这是组合api的生命周期 beforeCreate -> setup() 开始创建组件之前，创建的是data和method created -> setup() beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。 mounted -> onMounted 组件挂载完成后执行的函数 beforeUpdate -> onBeforeUpdate 组件更新之前...
vue3.0中setup使用(两种用法)
01-21
　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　Vue3 的一大特性函数 —- setup...
Vue3.0快速入门
06-30
2h极速入门Vue3.0 年终岁尾，又到了打工人写总结的时候，各位前端工程师，今年你的总结里是否有“Vue3.0”的身影呢？ 9月Vue3.0问世，对前端人来说，这是技术升级的一大步，同样也是一场学习效率的角逐。 不论你...
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 ...
vue3-ref和reactive
qq_52135740的博客
08-02 564
ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据：内部
Vue3之setup()、reactive、ref
知识应该共享，创造才应收费
05-13 946
在Vue3中，将Vue2.0的option API 制作成hook函数，比如`watch,compute`方法等，在Vue3中新增的`setup()`方法中，可以以函数的形式去使用Vue2.0的`watch，compute`等属性，`setup`函数的调用时机是创建组件实例，然后初始化`props`,紧接着是调用`setup`函数，从生命周期的角度来看，它会在`beforeCreate`之前调用，所以在`setup`函数内是拿不到上下文对象的，它创建的是`data`和`method`.Vue3
vue3新特性中的setup(),ref(),reactive()函数
荔枝吖阿
11-12 2883
setup()函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑写在setup 里就可以 ref() 函数用法，是更新简单的变量 reactive()函数用法，更新复杂类型的变化(数组/对象) 注：return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法 案例 删除某个数据如图: template <ul v-for="(item,index) in studentList.list" :key="i...
vue3学习笔记（3）setup、ref和reactive基本使用
gtd54789的博客
04-23 578
Vue3专栏入口 目录一、vue基础使用二、setup和ref基本使用三、reactive的基本使用 一、vue基础使用 将App.vue都删掉按照以下结构编写代码这就是起步模板 <template> <div>{{msg}}</div> </template> <script> // defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象 import { defineComponent } from 'vue
在VUE3的setup函数中如何引用（$ref）Html页面元素
球球不吃虾WHR2349博客
06-27 3022
如何在vue3中，在setup函数中使用ref来引用页面元素
vue3中setup使用ref视图没有发生变化，记录自己的坑
写点什么好
06-01 2374
在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用 原本以为代码是没有什么，而且打印也能看到showSearch的值发生变化，但视图没有任何响应。百度看了，也没看出问题。（估计是问题太低级了，这里是记入自己的坑）看了vue文案的案例: 才后知后觉，是不是少了value这个属性没用上去。 发现可以正常控制插件的显示了。
Vue3中的setup和ref && reactive函数
weixin_67642008的博客
08-21 618
setup函数，ref函数，reactive函数，响应式数据操作
Vue3知识点总结（一）——setup() ref() reactive()函数
qq_56989560的博客
05-27 1697
Vue3知识点总结——setup() ref() reactive()函数
vue3.0中setup
07-22
使用axios在Vue3.0的setup中需要先安装axios库，并在需要使用axios的组件或页面中导入axios，然后在setup函数中通过ref或reactive定义一个响应式的数据state，最后在需要发送请求的函数中通过axios发送请求并修改state的值，从而实现页面数据的获取和更新。例如： 1. 安装axios ``` npm install axios --save ``` 2. 导入axios ``` import axios from 'axios' ``` 3. 在setup函数中定义state ``` import {ref} from 'vue' export default { setup() { const state = ref({ dataList: [] }) // 发送请求的函数 const fetchData = async() => { const res = await axios.get('/api/data') state.value.dataList = res.data } return { state, fetchData } } } ``` 4. 在模板中使用state ``` <template> <div> <ul> <li v-for="data in state.dataList" :key="data.id">{{ data.name }}</li> </ul> <button @click="fetchData">获取数据</button> </div> </template> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值