Vue.js 响应式原理

最新推荐文章于 2021-09-07 15:14:48 发布
最新推荐文章于 2021-09-07 15:14:48 发布
阅读量407 收藏 2
点赞数
分类专栏： Vue.js 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Lixiaoshuai/article/details/118384765
版权

文章目录

Vue 数据响应式原理

vue 中的三个 核心概念：

  • 数据驱动
  • 数据响应式
  • 双向数据绑定

Vue 2.x 版本与 Vue 3.x 版本的响应式实现有所不同

  • Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现
  • Vue 3.x 响应式基于 ES6 的 Proxy 实现

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，
并返回此对象

Object/defineProperty

Object.defineProperty(obj, prop, descriptor)
/**
* 参数:
* obj 要定义属性的对象
* prop 要定义或修改的属性的名称或 Symbol
* descriptor 要定义或修改的属性描述符
*/

var property = ''
Object.defineProperty(obj, 'property', {
    get () {
      // get property do something...
      return genderValue
    },
    set (newValue) {
      // set property do something...
      genderValue = newValue
    }
})

// 声明数据对象，模拟 Vue 实例的 data 属性
let data = { msg: 'hello' }
// 模拟 Vue 实例的对象
let vm = {}
// 通过数据劫持的方式，将 data 的属性设置为 getter/setter
Object.defineProperty(vm, 'msg', {
      enumerable: true,  // 可遍历
      configurable: true, // 可配置
      get () {
        console.log('访问了属性')
        return data.msg
      },
      set (newValue) {
        // 更新数据
        data.msg = newValue
        // 数据更改，更新视图中 DOM 元素的内容
        document.querySelector('#app').textContent = data.msg
      }
})

基础实现 中存在的问题：

  • 操作中只监听了一个属性，多个属性无法处理
  • 无法监听数组变化（Vue 中同样存在）
  • 无法处理属性也为对象的情况

改进：

// 声明数据对象，模拟 Vue 实例的 data 属性
let data = {
  msg1: 'hello',
  msg2: 'world',
  arr: [1, 2, 3],
  obj: { name: 'jack', age: 18 }
}
// 模拟 Vue 实例的对象
let vm = {}

// 封装为函数，用于对数据进行响应式处理
const createReactive = (function () {
  const arrMethodName = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
  const customProto = {}
  customProto.__proto__ = Array.prototype
  arrMethodName.forEach(method => {
    customProto[method] = function () {
      const result = Array.prototype[method].apply(this, arguments)
      document.querySelector('#app').textContent = this
      return result
    }
  })

  // 需要进行数据劫持的主体功能，也是递归时需要的功能
  return function (data, vm) {
    // 遍历被劫持对象的所有属性
    Object.keys(data).forEach(key => {
      // 检测是否为数组
      if (Array.isArray(data[key])) {
        // 将当前数组实例的 __proto__ 更换为 customProto 即可
        data[key].__proto__ = customProto
      } else if (typeof data[key] === 'object' && data[key] !== null) {
        // 检测是否为对象，如果为对象，进行递归操作
        vm[key] = {}
        createReactive(data[key], vm[key])
        return
      }

      // 通过数据劫持的方式，将 data 的属性设置为 getter/setter
      Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: true,
        get () {
          console.log('访问了属性')
          return data[key]
        },
        set (newValue) {
          // 更新数据
          data[key] = newValue
          // 数据更改，更新视图中 DOM 元素的内容
          document.querySelector('#app').textContent = data[key]
        }
      })
    })
  }

})()

createReactive(data, vm)

数据响应式原理 Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义
（如属性查找、赋值、枚举、函数调用等）

const data = {
  msg1: '内容',
  arr: [1, 2, 3],
  obj: {
    name: 'william',
    age: 18
  }
}

const p = new Proxy(data, {
  get (target, property, receiver) {
    // handler.get() 方法用于拦截对象的读取属性操作。
    //参数:  1.目标对象, 2.被获取的属性名, 3.Proxy或者继承Proxy的对象
    console.log(target, property, receiver)
    return target[property]
  },
  set (target, property, value, receiver) {
    // handler.set() 方法用于拦截设置属性值的操作
    //参数:  1.目标对象, 2.被获取的属性名, 3.新属性值。 4.Proxy或者继承Proxy的对象
    console.log(target, property, value, receiver)
    target[property] = value
    // set() 方法应当返回一个布尔值。
  }
})

相关设计模式

设计模式（design pattern）是针对软件设 计中普遍存在的各种问题所提出的解决方案

观察者模式

  • 观察者模式（Observer pattern）指的是在对象间定义一个一对 多（被观察者与多个观察者）的关联，
  • 当一个对象改变了状态， 所有其他相关的对象会被通知并且自动刷新
  • 核心概念：
    • 观察者 Observer
    • 被观察者（观察目标）Subject

观察者模式

// 被观察者 (观察目标)
//   1 添加观察者
//   2 通知所有观察者
class Subject {
 constructor () {
   // 存储所有的观察者
   this.observers = []
 }
 // 添加观察者功能
 addObserver (observer) {
   // 检测传入的参数是否为 观察者 实例
   if (observer && observer.update) {
     this.observers.push(observer)
   }
 }
 // 通知所有观察者
 notify () {
   // 调用观察者列表中每个观察者的更新方法
   this.observers.forEach(observer => {
     observer.update()
   })
 }
}
// 观察者
//   1 当观察目标发生状态变化时，进行"更新"
class Observer {
 update () {
   console.log('事件发生了，进行相应的处理...')
 }
}
// 功能测试
const subject = new Subject()
const ob1 = new Observer()
const ob2 = new Observer()

// 将观察者添加给要观察的观察目标
subject.addObserver(ob1)
subject.addObserver(ob2)

// 通知观察者进行操作（某些具体的场景下）
subject.notify()

发布-订阅模式

  • 发布-订阅模式（Publish-subscribe pattern）可认为是为观察 者模式解耦的进阶版本
  • 特点：
    • 在发布者与订阅者之间添加消息中心，所有的消息均通过消息中心管理，
    • 而发布者与订阅者不会直接联系，实现了两者的解耦
  • 核心概念：
    • 消息中心 Dep
    • 订阅者 Subscriber
    • 发布者 Publisher
// 创建了一个 Vue 实例（消息中心）
const eventBus = new Vue()
// 注册事件（设置订阅者）
eventBus.$on('dataChange', () => {
  console.log('事件处理功能1')
})
eventBus.$on('dataChange', () => {
  console.log('事件处理功能2')
})

// 触发事件（设置发布者）
eventBus.$emit('dataChange')
  • 观察者模式是由观察者与观察目标组成的，适合组件内操作
    • 特性：特殊事件发生后，观察目标统一通知所有观察者
  • 发布/订阅模式是由发布者与订阅者以及消息中心组成，更加适合 消息类型复杂的情况
    • 特性：特殊事件发生，消息中心接到发布指令后，会根据事件类型给对 应的订阅者发送信息

Vue 响应式原理模拟

MVVM
要模拟 Vue 实现响应式数据，首先观察一下 Vue 实例的结 构，分析要实现哪些属性与功能

  • Vue
    • 目标：将 data 数据注入到 Vue 实例，便于方法内操作
    • 接收配置信息 - 将 data 的属性转换成 Getter、Setter，并注入到 Vue 实例中。
    • 监听 data 中所有属性的变化，设置成响应式数据
    • 调用解析功能（解析模板内的插值表达式、指令等）
  • Observer（发布者）
    • 目标：数据劫持，监听数据变化，并在变化时通知 Dep
    • 通过数据劫持方式监视 data 中的属性变化，变化时通知消息中心 Dep
    • 需要考虑 data 的属性也可能为对象，也要转换成响应式数据
  • Dep（消息中心） Dependency
    • 目标：存储订阅者以及管理消息的发送
    • Dep 用于 收集与管理订阅者与发布者之间的依赖关系
    • 为每个数据收集对应的依赖，存储依赖。
    • 添加并存储订阅者。
    • 数据变化时，通知所有观察者
  • Watcher（订阅者）
    • 目标：订阅数据变化，进行视图更新
    • 实例化 Watch 时，往dep对象中添加自己
    • 当数据变化触发 dep， dep 通知所有对应的 Watcher 实例更新视图
  • Compiler
    • 目标：解析模板中的指令与插值表达式，并替换成相应的数据
    • 进行页面的首次渲染 , 数据变化后，重新渲染视图

Vue 类

class Vue {
  constructor (options) {
    // 1 存储属性
    this.$options = options || {}
    this.$data = options.data || {}
    // 判断 el 值的类型，并进行相应处理
    const { el } = options
    this.$el = typeof el === 'string' ? document.querySelector(el) : el
    // 2 将 data 属性注入到 Vue 实例中
    _proxyData(this, this.$data)
    // *3. 创建 Observer 实例监视 data 的属性变化
    new Observer(this.$data)
    // *4. 调用 Compiler
    new Compiler(this)
  }
}
// 将 data 的属性注入到 Vue 实例
function _proxyData (target, data) {
  Object.keys(data).forEach(key => {
    Object.defineProperty(target, key, {
      enumerable: true,
      configurable: true,
      get () {
        return data[key]
      },
      set (newValue) {
        data[key] = newValue
      }
    })
  })
}

Observer 类

class Observer {
  // 接收传入的对象，将这个对象的属性转换为 Getter/Setter
  constructor (data) {
    this.data = data
    // 遍历数据
    this.walk(data)
  }
  // 封装用于数据遍历的方法
  walk (data) {
    // 将遍历后的属性都转换为 Getter、Setter
    Object.keys(data).forEach(key => this.convert(key, data[key]))
  }
  // 封装用于将对象转换为响应式数据的方法
  convert (key, value) {
    defineReactive(this.data, key, value)
  }
}

// 用于为对象定义一个响应式的属性
function defineReactive (data, key, value) {
  // 创建消息中心
  const dep = new Dep()

  // 检测是否为对象，如果是，创建一个新的 Observer 实例进行管理
  observer(value)

  // 进行数据劫持
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get () {
      console.log('获取了属性')
      // * 在触发 Getter 时添加订阅者
      Dep.target && dep.addSub(Dep.target)
      return value
    },
    set (newValue) {
      console.log('设置了属性')
      if (newValue === value) return
      value = newValue
      observer(value)

      // * 数据变化时，通知消息中心
      dep.notify()
    }
  })
}

function observer (value) {
  if (typeof value === 'object' && value !== null) {
    return new Observer(value)
  }
}

Dep 类

class Dep {
  constructor () {
    // 存储订阅者
    this.subs = []
  }
  // 添加订阅者
  addSub (sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 通知订阅者的方法
  notify () {
    // 遍历订阅者，并执行更新功能即可
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

Watcher 类

class Watcher {
  constructor (vm, key, cb) {
    // 当前 Vue 实例
    this.vm = vm
    // 订阅的属性名
    this.key = key
    // 数据变化后，要执行的回调
    this.cb = cb

    // 触发 Getter 前，将但当前订阅者实例存储给 Dep 类
    Dep.target = this
    // 记录属性更改之前的值，用于进行更新状态检测（导致了属性 Getter 的触发）
    this.oldValue = vm[key]
    // 操作完毕后清除 target，用于存储下一个 Watcher 实例
    Dep.target = null
  }
  // 封装数据变化时更新视图的功能
  update () {
    const newValue = this.vm[this.key]
    // 如果数据不变，无需更新
    if (newValue === this.oldValue) return
    // 数据改变，调用更新后的回调
    this.cb(newValue)
  }
}

Compiler 类

class Compiler {
  constructor (vm) {
    this.vm = vm
    this.el = vm.$el
    // 初始化模板编译方法
    this.compile(this.el)
  }
  // 基础模板方法
  compile (el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 检测节点类型（文本节点、元素节点）
      if (isTextNode(node)) {
        // 编译文本节点内容
        this.compileText(node)
      } else if (isElementNode(node)) {
        // 编译元素节点内容
        this.compileElement(node)
      }
      // 检测当前节点是否存在子节点
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })
  }
  // 封装文本节点编译方法
  compileText (node) {
    const reg = /\{\{(.+?)\}\}/g
    // 去除内容中不必要的空格与换行
    const value = node.textContent.replace(/\s/g, '')
    // 声明数据存储多段文本
    const tokens = []
    // 记录已经操作过的位置的索引
    let lastIndex = 0
    // 记录当前提取内容的初始索引
    let index
    let result
    while (result = reg.exec(value)) {
      // 本次提取内容的初始索引
      index = result.index
      // 处理普通文本
      if (index > lastIndex) {
        // 将中间部分的内容存储到 tokens 中
        tokens.push(value.slice(lastIndex, index))
      }
      // 处理插值表达式内容(去除空格的操作可省略)
      const key = result[1].trim()
      // 根据 key 获取对应属性值，存储到 tokens
      tokens.push(this.vm[key])
      // 更新 lastIndex
      lastIndex = index + result[0].length
      // 创建订阅者 Watcher 实时订阅数据变化
      const pos = tokens.length - 1
      new Watcher(this.vm, key, newValue => {
        // 数据变化，修改 tokens 中的对应数据
        tokens[pos] = newValue
        node.textContent = tokens.join('')
      })
    }
    if (tokens.length) {
      // 页面初始渲染
      node.textContent = tokens.join('')
    }
  }
  // 封装元素节点处理方法
  compileElement (node) {
    // 获取属性节点
    Array.from(node.attributes).forEach(attr => {
      // 保存属性名称，并检测属性的功能
      let attrName = attr.name
      if (!isDirective(attrName)) return
      // 获取指令的具体名称
      attrName = attrName.slice(2)
      // 获取指令的值，代表响应式数据的名称
      let key = attr.value
      // 封装 update 方法，用于进行不同指令的功能分配
      this.update(node, key, attrName)
    })
  }
  // 用于进行指令分配的方法
  update (node, key, attrName) {
    // 名称处理
    let updateFn = this[attrName + 'Updater']
    // 检测并调用
    updateFn && updateFn.call(this, node, key, this.vm[key])
  }
  // v-text 处理
  textUpdater (node, key, value) {
    // 给元素设置内容
    node.textContent = value
    // 订阅数据变化
    new Watcher(this.vm, key, newValue => {
      node.textContent = newValue
    })
  }
  // v-model 处理 
  modelUpdater (node, key, value) {
    // 给元素设置数据
    node.value = value
    // 订阅数据变化
    new Watcher(this.vm, key, newValue => {
      node.value = newValue
    })
    // 监听 input 事件，实现双向绑定
    node.addEventListener('input', () => {
      this.vm[key] = node.value
    })
  }
}
// 判断节点是否为元素节点
function isElementNode (node) {
  return node.nodeType === 1
}
// 判断节点是否为文本节点
function isTextNode (node) {
  return node.nodeType === 3
}
// 判断属性名是否为指令
function isDirective (attrName) {
  return attrName.startsWith('v-')
}

使用

<div id="app">
  这是msg1:{{ msg1 }} 这是msg2:{{ msg2 }}
  <p v-text="msg1" class="text"></p>
  <p>{{ msg1 }}</p>
  <p>{{ msg2 }}</p>
  <input type="text" v-model="msg2">
</div>
<script src="./js/Watcher.js"></script>
<script src="./js/Dep.js"></script>
<script src="./js/Compiler.js"></script>
<script src="./js/Observer.js"></script>
<script src="./js/Vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    // el: document.querySelector('#app'),
    data: {
      msg1: '内容1',
      msg2: '内容2',
      obj: {
        name: 'william',
        age: 18
      }
    }
  })
</script>
Mr_Lixiaoshuai
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写Vue.js响应式原理，实现一个自己的Vue响应式框架
鸭绒的博客
10-31 703
文章目录1.简述功能2.创建Vue3.Observer 实现响应式数据 1.简述功能 我们实现的一个带有响应式功能的简单Vue框架。 功能： 负责接收初始化的参数(options) 负责把data中的属性注入到Vue实例，转换成getter/setter 负责调用observer监听data属性中的变化 负责调用compiler解析指令/差值表达式 Vue类的结构： 前三个是Vue的属性，最后一个是Vue的方法,用于将data设置为setter/getter，并纳入Vue实例中。 项目初始结构： 2
Vue.js 中的响应式原理是什么？
u013749113的博客
06-05 1255
在Vue.js中，响应式是指当数据发生变化时，相关的视图将自动更新。这种自动更新是通过Vue.js内部的响应式系统实现的。响应式系统是Vue.js的核心组成部分之一，它的工作原理是将数据对象转换为响应式对象。响应式对象是一个包装了原始对象的代理对象，当我们访问响应式对象的属性时，实际上是访问了原始对象的属性。但是，当我们修改响应式对象的属性时，Vue.js会自动检测到这个变化，并通知相关的视图进行更新。Vue.js的响应式原理是通过将数据对象转换为响应式对象，利用ES6中的Proxy对象实现的。
vue响应式原理
热门推荐
weixin_48181168的博客
09-07 3万+
vue响应式原理 vue响应式也叫作数据双向绑定，大致原理阐述： ​ 首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。 ​ 此外，如果页面有input用v-model绑定数据，我们需要在这种绑定了data的input元素上添加监听，添加input事件监听，每.
Vue学习之源码分析--Vue.js响应式原理（一）
心暖未晴
10-19 598
关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法
Vue.js深入响应式原理
bokenice的博客
05-27 378
因为学习到相关知识，所以在此做了一个知识点的总结。 不过在学习之前我们来先了解下MVVM框架， MVVM框架： M–model层 ，它可以对 数据进行增删改查 V–view层，也就是我们所说的视图层，它与HTML一样的模板类似----用户界面（UI） VM–viewModel，它相当于我们model与view中间的一面镜子也就是我们所说的model和view的一个映射层，它是一个转值器，负责转换M...
vue.js响应式原理解析与实现
10-18
下面我们将详细讲解Vue.js响应式原理及其实现方式。 首先，我们要了解Vue.js如何实现数据的响应式。这主要依赖于JavaScript的`Object.defineProperty`方法。在ES5中，`Object.defineProperty`允许我们为对象的属性...
Vue.js 框架源码与进阶（二）- 模拟Vue.js响应式原理
最新发布
07-04
在"Vue.js框架源码与进阶（二）- 模拟Vue.js响应式原理"这个主题中，我们将深入探讨如何模拟Vue2.x的响应式机制。 首先，响应式系统的核心在于数据的观测（Observation）。在Vue2.x中，当创建一个Vue实例时，所有...
Vue.js-深入响应式原理
01-27
Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的...
从JavaScript属性描述器剖析Vue.js响应式视图
01-27
JavaScript中的属性描述器是深入理解诸如Vue.js这样的响应式框架的关键。属性描述符（PropertyDescriptor）允许我们精细控制对象属性的行为，这在构建复杂的数据绑定系统时尤为重要。在Vue.js中，这种机制被用来实现...
vue.js中响应式原理和双向数据绑定原理
zhangyuea的博客
04-22 7056
vue.js中响应式原理和双向数据绑定原理 1.首先，我们来了解一下什么叫状态管理？ 什么叫做状态？什么叫做状态管理？ 我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理 2.然后我们再了解一下什么叫Object.defiendProperty。 Object.defineProperty( obj , obj.attr , descriptor )...
【Vuejs】探索 Vue.js 响应式原理
奇舞周刊
01-20 456
提到“响应式”三个字，大家立刻想到啥？响应式布局？响应式编程？从字面意思可以看出，具有“响应式”特征的事物会根据条件变化，使得目标自动作出对应变化。比如在“响应式布局”中，页面根据不同设...
Vue.js实现响应式系统的基本原理
a253399414的博客
11-15 449
Vue.js 是一款 MVVM 框架，数据模型仅仅是普通的 JavaScript 对象，但是对这些对象进行操作时，却能影响对应视图，它的核心实现就是「响应式系统」。尽管我们在使用 Vue.js 进行开发时不会直接修改「响应式系统」，但是理解它的实现有助于避开一些常见的「坑」，也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。 Object.defineProperty 首先我们来介绍一下 Object.defineProperty，Vue.js就是基于它实现「响应式系统」的。Object.defin
浅谈Vue响应式原理
XinKun的博客
02-02 2万+
一、Vue中的响应式 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 二、响应式的基本原理 1.通过Object.definePropert来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持 2.观察者模式（发布者-订阅者） 观察者(订阅者) – Watcher： update()：当事件发生时，具体要做的事情 目标(发布者) – Dep: ①subs 数组：存储所有的观察者 ②
Vue.js学习 Item12 – 内部响应式原理探究
小平果的欢乐谷
07-11 2921
深入响应式原理大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。如何追踪变化把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.defi
完美解释 Javascript 响应式编程原理
weixin_34166472的博客
07-23 1263
深入响应式原理 — Vue.js https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d https://www.vuemastery.com/courses/advanced-components/evan-you-on-proxies/ 很多前端 JavaScri...
Vue.js 内部运行机制 (一) ---- 响应式系统基本原理
你的博客
08-03 848
最近准备好好看看《Vue的内部运行机制》，学到什么就写什么，先介绍Vue的响应式主要核心API Object.defineProperty(obj, key, descriptor) descriptor其中有几个属性： configurable  --》属性可配置性，属性是否可修改或删除，默认false enumerable --》属性可枚举性，默认false value --》属性值...
响应式系统的基本原理
YunWisdom
07-26 1805
响应式系统的基本原理 响应式系统 Vue.js 是一款 MVVM 框架，数据模型仅仅是普通的 JavaScript 对象，但是对这些对象进行操作时，却能影响对应视图，它的核心实现就是「响应式系统」。尽管我们在使用 Vue.js 进行开发时不会直接修改「响应式系统」，但是理解它的实现有助于避开一些常见的「坑」，也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。 Object.defineProperty 首先我们来介绍一下Object.defineProperty，Vue.js就是基于它.

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值