vue源码解析-实现

最新推荐文章于 2024-06-19 18:19:02 发布
最新推荐文章于 2024-06-19 18:19:02 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45730243/article/details/124934219
版权

一、真实DOM渲染

<!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>
  
  <div>
    <h2>哈哈哈</h2>
    <h2>呵呵呵</h2>
    <div>发发的说法</div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

</body>
</html>

二、vue的渲染器实现

  • 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>
    <div id="app"></div>
    <script src="./renderer.js"></script>
    <script>
      const increment = () => {
        console.log("+1");
      };
      const dcrement = () => {
        console.log("-1");
      };
      //1.通过h函数来创建一个vnode
      const vnode = h("div", { class: "title" }, [
        h("h2", null, "当前计数：0"),
        h("button", { onclick: increment }, "+1"),
      ]);
      //2.通过mount函数，将vnode挂载到div#app上
      mount(vnode, document.querySelector("#app"));
      //3.创建新的vnode
      setTimeout(() => {
        const vnode1 = h("div", { class: "why" }, [
          h("h2", null, "当前计数：222"),
          h("button", { onclick: dcrement }, "+222"),
        ]);
        patch(vnode, vnode1);
      }, 2000);
    </script>
  </body>
</html>
  • render.js
const h = (tag, props, children) => {
  //vnode -> javascript对象 -> {}
  return {
    tag,
    props,
    children,
  };
};

const mount = (vnode, container) => {
  //vnode -> element
  //1.创建出真实元素，并在vnode上保留el
  const el = (vnode.el = document.createElement(vnode.tag));

  //2.处理props
  if (vnode.props) {
    for (const key in vnode.props) {
      const value = vnode.props[key];
      if (key.startsWith("on")) {
        //对事件监听的判断
        el.addEventListener(key.slice(2).toLowerCase(), value);
      } else {
        el.setAttribute(key, value);
      }
    }
  }

  //3.处理children
  if (vnode.children) {
    if (typeof vnode.children === "string") {
      el.textContent = vnode.children;
    } else {
      vnode.children.forEach((item) => {
        mount(item, el);
      });
    }
  }

  //4.将el挂载到container上
  container.appendChild(el);
};

const patch = (n1, n2) => {
  if (n1.tag !== n2.tag) {
    const n1ElParent = n1.el.parentElement;
    n1ElParent.removeChild(n1.el);
    mount(n2, n1ElParent);
  } else {
    //1.取出element对象，并且在n2中进行保存
    const el = (n2.el = n1.el);

    //2.处理props
    const oldProps = n1.props || {};
    const newProps = n2.props || {};
    //2.1.获取所有的newProps添加到el
    for (const key in newProps) {
      const oldValue = oldProps[key];
      const newValue = newProps[key];
      if (newValue !== oldValue) {
        if (key.startsWith("on")) {
          //对事件监听的判断
          el.addEventListener(key.slice(2).toLowerCase(), newValue);
        } else {
          el.setAttribute(key, newValue);
        }
      }
    }

    //2.2.删除旧的props
    for (const key in oldProps) {
      if (key.startsWith("on")) {
        const value = oldProps[key];
        el.removeEventListener(key.slice(2).toLowerCase(), value);
      }
      if (!(key in newProps)) {
        el.removeAttribute(key);
      }
    }

    //3.处理children
    const oldChildren = n1.children || [];
    const newChildren = n2.children || [];

    if (typeof newChildren === "string") {
      //情况一：newChildren本身是一个 string
      //边界情况 (edge case)
      if (typeof oldChildren === "string") {
        if (newChildren !== oldChildren) {
          el.textContent = newChildren;
        }
      } else {
        el.innerHTML = newChildren;
      }
    } else {
      //情况二：newChildren本身是一个数组
      if (typeof oldChildren === "string") {
        el.innerHTML = "";
        newChildren.forEach((item) => {
          mount(item, el);
        });
      } else {
        //oldChildren [v1,v2,v3]
        //newChildren [v1,v5,v6,v8,v9]
        //1.前面有相同节点的元素进行patch操作
        const commonLength = Math.min(oldChildren.length, newChildren.length);
        for (let i = 0; i < commonLength; i++) {
          patch(oldChildren[i], newChildren[i]);
        }

        //2.newChildren.length > oldChildren.length
        if (newChildren.length > oldChildren.length) {
          newChildren.slice(oldChildren.length).forEach((item) => {
            mount(item, el);
          });
        }

        //3.newChildren.length < oldChildren.length
        if (newChildren.length < oldChildren.length) {
          oldChildren.slice(newChildren.length).forEach((item) => {
            el.removeChild(item.el);
          });
        }
      }
    }
  }
};

三、响应式系统实现

vue2的响应式

class Dep {
  constructor() {
    this.subscribers = new Set();
  }

  addEffect(effect) {
    this.subscribers.add(effect);
  }

  notify() {
    this.subscribers.forEach((effect) => {
      effect();
    });
  }

  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }
}

let activeEffect = null;
function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}

//Map({key:value}):key是一个字符串
//weakMap({key(对象):value})  key是一个对象 弱引用
const targetMap = new WeakMap();
function getDep(target, key) {
  //1.根据(target)对象取出对应的Map对象
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  //2.取出具体的dep对象
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}

// vue2对raw进行数据劫持
function reactive(raw) {
  Object.keys(raw).forEach((key) => {
    const dep = getDep(raw, key);
    let value = raw[key];

    Object.defineProperty(raw, key, {
      get() {
        dep.depend();
        return value;
      },
      set(newValue) {
        if (value !== newValue) {
          value = newValue;
          dep.notify();
        }
      },
    });
  });
  return raw;
}

//测试代码
const info = reactive({ counter: 100, name: "why" });
const foo = reactive({ height: 1.88 });

info.name = "125454";
watchEffect(function () {
  console.log("effect1:", info.counter * 2, info.name);
});

watchEffect(function () {
  console.log("effect2:", info.counter * info.counter);
});
watchEffect(function () {
  console.log("effect3:", info.counter + 10, info.name);
});

watchEffect(function () {
  console.log("effect4:", foo.height);
});
info.counter++;
//info.name = "why";
//foo.height = 2;

vue3的响应式系统实现

class Dep {
  constructor() {
    this.subscribers = new Set();
  }

  addEffect(effect) {
    this.subscribers.add(effect);
  }

  notify() {
    this.subscribers.forEach((effect) => {
      effect();
    });
  }

  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }
}

let activeEffect = null;
function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}

//Map({key:value}):key是一个字符串
//weakMap({key(对象):value})  key是一个对象 弱引用
const targetMap = new WeakMap();
function getDep(target, key) {
  //1.根据(target)对象取出对应的Map对象
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  //2.取出具体的dep对象
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}

// vue3对raw进行数据劫持
function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const dep = getDep(target, key);
      dep.depend();
      return target[key];
    },
    set(target, key, newValue) {
      const dep = getDep(target, key);
      target[key] = newValue;
      dep.notify();
    },
  });
}

//测试代码
const info = reactive({ counter: 100, name: "why" });
const foo = reactive({ height: 1.88 });

info.name = "125454";
watchEffect(function () {
  console.log("effect1:", info.counter * 2, info.name);
});

watchEffect(function () {
  console.log("effect2:", info.counter * info.counter);
});
watchEffect(function () {
  console.log("effect3:", info.counter + 10, info.name);
});

watchEffect(function () {
  console.log("effect4:", foo.height);
});
//info.counter++;
info.name = "why";
//foo.height = 2;

完整的miniVue

目录结构
在这里插入图片描述

  • index.js
function createApp(rootComponent) {
  return {
    mount(selecter) {
      const container = document.querySelector(selecter);
      let isMounted = false;
      let oldVnode = null;
      watchEffect(function () {
        if (!isMounted) {
          oldVnode = rootComponent.render();
          mount(oldVnode, container);
          isMounted = true;
        } else {
          const newVnode = rootComponent.render();
          patch(oldVnode, newVnode);
          oldVnode = newVnode;
        }
      });
    },
  };
}
  • index.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>
    <div id="app"></div>
    <script src="../02_渲染器实现/renderer.js"></script>
    <script src="../03_响应式系统/04_响应式vue3实现.js"></script>
    <script src="./index.js"></script>
    <script>
      //1.创建根组件
      const App = {
        data: reactive({
          counter: 0,
        }),
        render() {
          return h("div", null, [
            h("h2", null, `当前计数：${this.data.counter}`),
            h(
              "button",
              {
                onClick: ()=> {
                  this.data.counter++;
                },
              },
              "+1"
            ),
          ]);
        },
      };
      //2.挂载根组件
      const app = createApp(App);
      app.mount("#app");
    </script>
  </body>
</html>
  • mini-vue下 index.js
function createApp(rootComponent) {
  return {
    mount(selector) {
      const container = document.querySelector(selector);
      let isMounted = false;
      let oldVNode = null;

      watchEffect(function() {
        if (!isMounted) {
          oldVNode = rootComponent.render();
          mount(oldVNode, container);
          isMounted = true;
        } else {
          const newVNode = rootComponent.render();
          patch(oldVNode, newVNode);
          oldVNode = newVNode;
        }
      })
    }
  }
}
  • mini-vue下reactive.js
class Dep {
  constructor() {
    this.subscribers = new Set();
  }

  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }

  notify() {
    this.subscribers.forEach(effect => {
      effect();
    })
  }
}

let activeEffect = null;
function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}


// Map({key: value}): key是一个字符串
// WeakMap({key(对象): value}): key是一个对象, 弱引用
const targetMap = new WeakMap();
function getDep(target, key) {
  // 1.根据对象(target)取出对应的Map对象
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  // 2.取出具体的dep对象
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}


// vue3对raw进行数据劫持
function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const dep = getDep(target, key);
      dep.depend();
      return target[key];
    },
    set(target, key, newValue) {
      const dep = getDep(target, key);
      target[key] = newValue;
      dep.notify();
    }
  })
}

// const proxy = reactive({name: "123"})
// proxy.name = "321";


// // 测试代码
// const info = reactive({counter: 100, name: "why"});
// const foo = reactive({height: 1.88});

// // watchEffect1
// watchEffect(function () {
//   console.log("effect1:", info.counter * 2, info.name);
// })

// // watchEffect2
// watchEffect(function () {
//   console.log("effect2:", info.counter * info.counter);
// })

// // watchEffect3
// watchEffect(function () {
//   console.log("effect3:", info.counter + 10, info.name);
// })

// watchEffect(function () {
//   console.log("effect4:", foo.height);
// })

// info.counter++;
// info.name = "why";

// foo.height = 2;
  • mini-vue下render.js
const h = (tag, props, children) => {
  // vnode -> javascript对象 -> {}
  return {
    tag,
    props,
    children
  }
}

const mount = (vnode, container) => {
  // vnode -> element
  // 1.创建出真实的原生, 并且在vnode上保留el
  const el = vnode.el = document.createElement(vnode.tag);

  // 2.处理props
  if (vnode.props) {
    for (const key in vnode.props) {
      const value = vnode.props[key];

      if (key.startsWith("on")) { // 对事件监听的判断
        el.addEventListener(key.slice(2).toLowerCase(), value)
      } else {
        el.setAttribute(key, value);
      }
    }
  }

  // 3.处理children
  if (vnode.children) {
    if (typeof vnode.children === "string") {
      el.textContent = vnode.children;
    } else {
      vnode.children.forEach(item => {
        mount(item, el);
      })
    }
  }

  // 4.将el挂载到container上
  container.appendChild(el);
}

const patch = (n1, n2) => {
  if (n1.tag !== n2.tag) {
    const n1ElParent = n1.el.parentElement;
    n1ElParent.removeChild(n1.el);
    mount(n2, n1ElParent);
  } else {
    // 1.取出element对象, 并且在n2中进行保存
    const el = n2.el = n1.el;

    // 2.处理props
    const oldProps = n1.props || {};
    const newProps = n2.props || {};
    // 2.1.获取所有的newProps添加到el
    for (const key in newProps) {
      const oldValue = oldProps[key];
      const newValue = newProps[key];
      if (newValue !== oldValue) {
        if (key.startsWith("on")) { // 对事件监听的判断
          el.addEventListener(key.slice(2).toLowerCase(), newValue)
        } else {
          el.setAttribute(key, newValue);
        }
      }
    }

    // 2.2.删除旧的props
    for (const key in oldProps) {
      if (key.startsWith("on")) { // 对事件监听的判断
        const value = oldProps[key];
        el.removeEventListener(key.slice(2).toLowerCase(), value)
      } 
      if (!(key in newProps)) {
        el.removeAttribute(key);
      }
    }

    // 3.处理children
    const oldChildren = n1.children || [];
    const newChidlren = n2.children || [];

    if (typeof newChidlren === "string") { // 情况一: newChildren本身是一个string
      // 边界情况 (edge case)
      if (typeof oldChildren === "string") {
        if (newChidlren !== oldChildren) {
          el.textContent = newChidlren
        }
      } else {
        el.innerHTML = newChidlren;
      }
    } else { // 情况二: newChildren本身是一个数组
      if (typeof oldChildren === "string") {
        el.innerHTML = "";
        newChidlren.forEach(item => {
          mount(item, el);
        })
      } else {
        // oldChildren: [v1, v2, v3, v8, v9]
        // newChildren: [v1, v5, v6]
        // 1.前面有相同节点的原生进行patch操作
        const commonLength = Math.min(oldChildren.length, newChidlren.length);
        for (let i = 0; i < commonLength; i++) {
          patch(oldChildren[i], newChidlren[i]);
        }

        // 2.newChildren.length > oldChildren.length
        if (newChidlren.length > oldChildren.length) {
          newChidlren.slice(oldChildren.length).forEach(item => {
            mount(item, el);
          })
        }

        // 3.newChildren.length < oldChildren.length
        if (newChidlren.length < oldChildren.length) {
          oldChildren.slice(newChidlren.length).forEach(item => {
            el.removeChild(item.el);
          })
        }
      }
    }
  }
}
南风number
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue源码全方位深入解析
sinat_31900531的博客
04-05 3073
一、资源 1. Vue.js解密文档：https://ustbhuangyi.github.io/vue-analysis/prepare/ 2. flow类型注释官方文档：https://flow.org/en/docs/types/ 二、环境配置 1. flow (1)npm install --global flow-bin 全局安装 (2) 新建一个文件夹，比如flow-t...
vue源码解析-源码11111111111
06-07
在"vue源码解析-源码11111111111"这个主题中，我们主要关注Vue.js的核心概念和实现细节。首先，Vue的设计遵循了MVVM（Model-View-ViewModel）模式，通过双向数据绑定将视图和模型紧密连接。这种绑定机制的核心是`v-...
vue2源码解析（学习笔记）
weixin_47454918的博客
04-18 2420
vue源码调试解析
vue源码
qq_41256253的博客
06-23 2021
这里写目录标题01-vue源码学习-柯里化函数一、概念:二、代码实现三、柯里化函数原理其实是闭包02-vue源码学习-vue的基本执行流程和简单渲染模型03-vue源码学习-响应式原理(对象和数组) 01-vue源码学习-柯里化函数 一、概念: 柯里化: 一个函数原本有多个参数, 之传入一个参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 偏函数: 一个函数原本有多个参数, 之传入一部分参数, 生成一个新函数, 由新函数接收剩下的参数来运行得到结构. 高阶函数: 一个函数参数是一个函数, 该
VUE3实现个人网站模板源码
最新发布
xcLeigh
06-19 2045
VUE3实现个人网站模板源码，个人网站源码，兼容VUE各个版本，大作业网站源码，源码有五个页面，网站首页，个人工具，个人日志，个人相册，给我留言等模块，内容可以自己调整，自定义导航菜单，轮播图，表单，表格，自定义标签项，代码简单，上手快，模板通俗易懂，可以在此模板上改文字描述就行。可以直接使用。也可直接预览效果。
Minio入门系列【18】Minio+vue-uploader 分片上传方案及案例详解（源码文尾附上）
热门推荐
记录知识、锤炼自我
03-15 1万+
文章目录前言优化方案案例1. 前言 我们之前分析过Minio 的上传接口源码，其是进行了分块，再上传分块到Minio 服务器，最后再对块进行合并。 针对大文件的上传，如果采用上传到文件服务，再上传到Minio，其效率是非常低的，首先上传到文件服务（会存放在Tomcat 临时目录）就已经比较慢了。 针对大文件的上传，我们需要一个优化方案。 优化方案 前端服务进行分片处理，将分片信息传递给文件服务，文件服务返回所有分片的上传链接及uploadId。 前端服务直接请求Minio 服务器，并发处理上传分片 所有
Vue源码篇
深夜代码酒神
06-27 1644
Vue源码篇
从零解析Vue源码---内涵注释
07-25
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据双向绑定和简易上手而闻名。本教程将从零开始解析Vue的源码，...无论你是初学者还是经验丰富的开发者，深入理解Vue源码都将对你的职业生涯产生深远影响。
vue源码解析.zip
05-13
本资料"vue源码解析.zip"包含了一份名为"vue.pdf"的文档，预计会详细阐述Vue的核心概念、设计模式以及源码实现。 首先，Vue.js 的核心特性包括双向数据绑定、组件系统、指令系统和虚拟DOM。双向数据绑定通过`v-...
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定，解析指令等。 几种实现双向绑定的做法 目前几种主流的mvc（vm）框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向...
vue-source:Vue原始解析-源码解析
03-24
以上只是Vue源码解析的一小部分，实际源码中包含了更多细节和优化策略。通过学习Vue的源码，开发者可以更好地理解其工作原理，提升自己的开发技能，甚至为框架贡献代码。在"vue-source-master"这个项目中，你可以...
vue源码解读超级详细版(内含脑图).rar
12-14
vue源码业余时间差不多看了一年，以前在网上找帖子，发现很多帖子很零散，都是一部分一部分说，断章的很多，所以自己下定决定一行行看，经过自己坚持与努力，现在基本看完了 。这个vue源码逐行分析，我基本每一行都打上注释，加上整个框架的流程思维导图，基本上是小白也能看懂的vue源码了。来自: https://github.com/qq281113270/vue
vue.js入门源代码
08-07
vue.js入门源代码
Vue 源码深入解析 附代码
04-30
深入解析Vue开始到结束过程中发生了什么， 组件内的数据是怎样支持双向绑定以及如何刷新视图的。
有关vue源码的简单实现 实现一个属于自己的min-vue
油墨香^-^的博客
02-23 96
自己实现的mini-vue仓库：https://github.com/maolovecoding/mini-vue2-stage[1] 建议克隆代码观看，效果更佳。实现了Vue实现了响应式数据实现了模板编译实现了ast转renderrender执行生成虚拟dom虚拟dom转真实dom渲染页面响应式数据和页面渲染结合 数据改变可自动更新视图实现同步更新数据，异步更新视图优雅降级10.实现nextTick 11. 实现了mixin，目前只支持生命周期的合并代码中注释很多，觉得不习惯的可以一边看一边删除多余的注释
2024年最全Vue 3源码及原理，看这篇就懂了(1)，2024年最新handle机制面试
java_dazhuzhu的博客
05-14 632
对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。第二：面试考量的不仅是你对技术的掌握，更考量你对新技术的敏感度以及学习能力，Vue 3.0 作为受众极广的最新版本框架，自然是面试时必问的内容。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？js的基本类型有哪些？
Vue源码常见问题
yiyueqinghui的博客
06-20 905
1，new Vue()都做了什么 1，new Vue ( ）是创建 Vue 实例，它内部执行了根实例的初始化过程。 2， 初始化过程具体包括以下操作： 合并配置 初始化事件中心 初始化生命周期 (new Vue()时只调用了beforeCreated、created两个生命周期) 初始化渲染 初始化数据 data、props、computed、watcher 等 3，new Vue( ) 创建了根实例并准备好数据和方法，以备将来执行挂载进使用。 2，说一说你对Vue响应式的理解 1，所谓数据响应式
Vue.js源码全方位深入解析--学习笔记
weixin_30585437的博客
05-05 1198
模板中的插入变量是如何渲染到DOM上的？ initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化 为什么可以通过this访问到data里面的数据？ initstate(vm)->initData()->proxy(vm,_data,key)代理函数 所以我们也可以同过this._data.dataName获取到...
Vue源码解析：数据响应系统详解与双向绑定实现
本文将深入解析Vue源码中的数据响应系统，通过实例分析和理论讲解来帮助读者理解这一核心机制。首先，我们回顾数据双向绑定的基本概念，即当数据发生变化时，视图自动更新，反之亦然。在Vue中，这种行为主要依赖于`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值