vue简版源码解析以及简版的实现

最新推荐文章于 2024-10-03 16:14:13 发布
置顶 最新推荐文章于 2024-10-03 16:14:13 发布
阅读量425 收藏 3
点赞数 4
分类专栏： vue源码 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44385915/article/details/115428264
版权

vue的设计思想(MVVM模式)

在这里插入图片描述
MVVM框架的三要素包括: 数据响应式 模板引擎及其渲染

  1. 数据响应式: 监听数据变化并在视图中更新
    Object.defineProperty() ---- vue2中采用的数据劫持,数据拦截的策略
    Proxy — vue3中采用的是代理模式
  2. 模板引擎: 提供描述视图的模板语法
    插值: {{}}
    指令: v–on, v-bind, v-model, v-for, v-if 等等
  3. 渲染: 如何将模板转换成为html
    模板 => vdom => dom

数据响应式原理

数据变更能够响应在视图中,就是数据数据响应式. vue2中利用Object.defineProperty()实现变更检测.
在这里插入图片描述

简单实现
// Object.defineProperty()
// 对传入对象的key进行一次拦截, 对某个对象的某个key做拦截
function definReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key)
      return val
    },
    set(newValue) {
      if(val !== newValue) {
        val = newValue
        console.log('set', key, val)
      }
    }
  })
}

const obj = {}

definReactive(obj, 'foo', 'foo')
obj.foo
obj.foo = 'foooooooooooooo1212'
结合视图
<meta charset="UTF-8">
<div id="app"></div>

<script>
function definReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key)
      return val
    },
    /**
    在上面定义函数的时候放了一个val, val是一个形参,
    但是对一个形参的赋值看起来是没有意义的,但是这里却产生了影响,
    产生影响的原因是这里形成了闭包(因为局部变量val的存在,其次内部
    get函数将val返回出去形成了闭包)使val在内存中驻留
    **/
    set(newValue) {
      if(val !== newValue) {
        val = newValue
        console.log('set', key, val)
	    update()
      }
    }
  })
}
const obj = {}
definReactive(obj, 'foo', new Date().toLocaleTimeString())
function update() {
	app.innerHTML = obj.foo
}
setInterval(() => {
	obj.foo = new Date().toLocaleTimeString()
}, 1000);
</script>

遍历需要响应化的对象

// 遍历指定数据对象中的每个key,并拦截他们
function observe(obj) {
	// 判断是否是一个对象
	if(typeof obj !== 'object' || obj === null) {
		return obj
	}
	Object.keys(obj).forEach(key => {
		definReactive(obj, key, obj[key])
	})
}

测试结果

const obj = {foo:'foo',bar:'bar',baz:{a:1}}
observe(obj)
obj.foo
obj.foo = 'foooooooooooo'
obj.bar
obj.bar = 'barrrrrrrrrrr'
obj.baz.a = 10 // 嵌套对象no ok 当有嵌套对象的时候,拦截不到,
// 需要另外处理

解决嵌套对象问题

function defineReactive(obj, key, val) {
	observe(val)
	Object.defineProperty(obj, key, {
//...

解决赋的值是对象的情况, 当出现下面的这种赋值,又会出现问题,因此在set操作的时候,进行一次响应式处理

obj.baz = {a:1}
obj.baz.a = 10 // no ok

set(newVal) {
	if (newVal !== val) {
	observe(newVal) // 新值是对象的情况
	notifyUpdate()

但是如果添加/删除了新属性⽆法检测,例如下面的情况

obj.dong = 'dong'
obj.dong // 并没有get信息

因此需要写set方法,进行一次响应式处理

function set(obj, key, val) {
   defineReactive(obj, key, val) 
}

测试代码:

set(obj, 'dong', 'dong')
obj.dong

但是 defineProperty() 对数组的支持并不友好,在vue源码中,对数组的七个方法进行了重写,这里先不进行讲解

Vue中的数据响应化

目标代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>{{counter}}</p>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 1
      },
    })
    setInterval(() => {
      app.counter++
    }, 1000);
  </script>
</body>

</html>
原理分析
  • new Vue() ⾸先执⾏初始化，对data执⾏响应化处理，这个过程发⽣在Observer中
  • 同时对模板执⾏编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发⽣在Compile中
  • 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调⽤更新函数
  • 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher
  • 将来data中数据⼀旦发⽣变化，会⾸先找到对应的Dep，通知所有Watcher执⾏更新函数
    在这里插入图片描述
涉及的类型介绍
  • kVue: 框架的构造函数
  • Observe: 执行数据响应化(分辨数据是对象还是数组, 这里我只对对象进行处理)
  • Compile: 编译模板,初始化视图, 收集依赖(更新函数, watcher创建)
  • Watcher: 执行更新函数(更新dom)
  • Dep: 管理多个Watcher, 批量更新
KVue

框架构造函数：执⾏初始化
执⾏初始化，对data执⾏响应化处理，kvue.js

// 遍历指定数据对象中的每个key,并拦截他们
function observe(obj) {
	// 判断是否是一个对象
	if(typeof obj !== 'object' || obj === null) {
		return obj
	}
   // 每遇到一个对象,就创建一个Observer的实例
  // 创建一个Observer 实例去做拦截操作
  new Observer(obj)
}

// 根据value 类型做不同的操作(数组和对象)
class Observer {
  constructor(value) {
    this.value = value
    // 应该需要判断value 类型, 然后对对象和数组进行不同的操作
    // 这里只处理对象
    // 遍历对象
    this.walk(value)
  }

  walk(obj) {
    Object.keys(obj).forEach(key => {
      definReactive(obj, key, obj[key])
    })
  }
}

class kvue {
  constructor(options) {
    // 0: 保存options
    this.$options = options
    this.$data = options.data
    // 1. 将data做响应式处理
    observe(this.$data)
    // 2. 为$data做代理
    proxy(this, '$data')
  }
}

为$data做代理, 代码如下,若不做代理则需要app.$data.counter++ 进行访问, 代理代码如下

// proxy代理函数: 让用户可以直接访问data里的属性
function proxy(vm, key) {
  Object.keys(vm[key]).forEach(k => {
    Object.defineProperty(vm, k, {
      get() {
        return vm[key][k]
      },
      set(v) {
        vm[key][k] = v
      }
    })
  })
}
编译 - Compile

编译模板中vue模板特殊语法，初始化视图、更新视图
在这里插入图片描述

初始化视图

根据节点类型编译，compile.js

class Compile {
  // el - 宿主元素, vm - kvue 实例
  constructor(el, vm) {
    this.$el = document.querySelector(el)
    this.$vm = vm
    // 解析模板
    if (this.$el) {
      // 执行编译方法
      this.compile(this.$el)
    }
  }
  compile(el) {
    // el是宿主元素
    // 遍历,判断当前遍历元素的类型
    el.childNodes.forEach(node => {
      if (node.nodeType === 1) {
        console.log('编译元素', node.nodeName)
      } else if(this.isInter(node)) {
        // 文本, {{xxxx}}
        console.log('编译文本', node.textContent, RegExp.$1)
      }
      // 递归 ,判断node是否还有child
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }

  // 判断插值表达式
  isInter(node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }
}

编译插值，compile.js

compile(el) {
	 // ...
	 } else if (this.isInerpolation(node)) {
	 // console.log("编译插值⽂本" + node.textContent);
	     this.compileText(node);
	}
	});
}
compileText(node) {
	console.log(RegExp.$1);
	node.textContent = this.$vm[RegExp.$1];
}

编译元素

compile(el) {
	//...
	if (this.isElement(node)) {
		// console.log("编译元素" + node.nodeName);
		this.compileElement(node)
	} 
}
compileElement(node) {
	let nodeAttrs = node.attributes;
	Array.from(nodeAttrs).forEach(attr => {
		let attrName = attr.name;
		let exp = attr.value;
		if (this.isDirective(attrName)) {
			let dir = attrName.substring(2);
			this[dir] && this[dir](node, exp);
		 }
	 });
}
 // 判断是否是指令
isDirective(attr) {
  return attr.indexOf("k-") == 0; 
}
// k-text 对应的操作函数
text(node, exp) {
  node.textContent = this.$vm[exp];
}
// k-html 对应的操作函数
html(node, exp) {
  node.innerHTML = this.$vm[exp]
}
依赖收集

视图中会⽤到data中某key，这称为依赖。同⼀个key可能出现多次，每次都需要收集出来⽤⼀个Watcher来维护它们，此过程称为依赖收集。
多个Watcher需要⼀个Dep来管理，需要更新时由Dep统⼀通知。看下⾯案例，理出思路：

new Vue({
  	template:
		`<div>
			<p>{{name1}}</p>
			<p>{{name2}}</p>
			<p>{{name1}}</p>
		<div>`,
	data: {
		name1: 'name1',
		name2: 'name2'
	 }
});

上面代码出现了两次name1和一次name2,总共有三个依赖,会有3个Watcher, 但是每个key只会是一个Dep
在这里插入图片描述
实现思路

  1. defineReactive时为每⼀个key创建⼀个Dep实例
  2. 初始化视图时读取某个key，例如name1，创建⼀个watcher1
  3. 由于触发name1的getter⽅法，便将watcher1添加到name1对应的Dep中
  4. 当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新
创建Watcher，kvue.js
const watchers = [];//临时⽤于保存watcher测试⽤
// 监听器：负责更新视图
class Watcher {
	constructor(vm, key, updateFn) {
		// kvue实例
		this.vm = vm;
		// 依赖key
		this.key = key;
		// 更新函数
		this.updateFn = updateFn;
		// 临时放⼊watchers数组
		watchers.push(this)
    }
	// 更新
	update() {
	   this.updateFn.call(this.vm, this.vm[this.key]);
	}
}
编写更新函数、创建watcher
// 调⽤update函数执插值⽂本赋值
compileText(node) {
	// console.log(RegExp.$1);
	// node.textContent = this.$vm[RegExp.$1];
	this.update(node, RegExp.$1, 'text') 
}
text(node, exp) {
    this.update(node, exp, 'text')
}
html(node, exp) {
    this.update(node, exp, 'html')
}
update(node, exp, dir) {
	const fn = this[dir+'Updater']
	fn && fn(node, this.$vm[exp])
	new Watcher(this.$vm, exp, function(val){
	  fn && fn(node, val)
	})
}
textUpdater(node, val) {
    node.textContent = val; 
}
htmlUpdater(node, val) {
    node.innerHTML = val
}
声明Dep
class Dep {
	constructor () {
	    this.deps = []
	}
	addDep (dep) {
	    this.deps.push(dep)
	}
	notify() {
	   this.deps.forEach(dep => dep.update());
	}
}
创建watcher时触发getter
class Watcher {
  constructor(vm, key, updaterFn) {
    this.vm = vm
    this.key = key
    this.updaterFn = updaterFn
    // 依赖收集
    // watchers.push(this)
    Dep.target = this
    this.vm[this.key] // 触发上面的get
    Dep.target = null
  }

  update() {
    this.updaterFn.call(this.vm, this.vm[this.key])
  }
}
依赖收集，创建Dep实例
// 对传入对象的key进行一次拦截, 对某个对象的某个key做拦截
function definReactive(obj, key, val) {
  // 如果val 是对象, 则需要继续递归处理
  observe(val)
  // Dep创建的最佳时刻
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key)
      // 依赖收集
      Dep.target && dep.addDep(Dep.target)
      return val
    },
    set(newValue) {
      if(val !== newValue) {
        // 如果newValue 是对象也需要做响应式处理
        observe(newValue)
        val = newValue
        console.log('set', key, val)
        // console.log(watchers)
        // watchers.forEach(w => w.update())
        // 通知更新
        dep.notify()
      }
    }
  })
}

下面附上kvue,js 的完整代码

// 实现kvue 的构造函数
// 1. 将data做响应式处理


// Object.defineProperty()
// 对传入对象的key进行一次拦截, 对某个对象的某个key做拦截
function definReactive(obj, key, val) {
  // 如果val 是对象, 则需要继续递归处理
  observe(val)
  // Dep创建的最佳时刻
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key)
      // 依赖收集
      Dep.target && dep.addDep(Dep.target)
      return val
    },
    set(newValue) {
      if(val !== newValue) {
        // 如果newValue 是对象也需要做响应式处理
        observe(newValue)
        val = newValue
        console.log('set', key, val)
        // console.log(watchers)
        // watchers.forEach(w => w.update())
        // 通知更新
        dep.notify()
      }
    }
  })
}

// 遍历指定数据对象中的每个key,并拦截他们
function observe(obj) {
	// 判断是否是一个对象
	if(typeof obj !== 'object' || obj === null) {
		return obj
	}
	// Object.keys(obj).forEach(key => {
	// 	definReactive(obj, key, obj[key])
	// })
  // 每遇到一个对象,就创建一个Observer的实例
  // 创建一个Observer 实例去做拦截操作
  new Observer(obj)
}

function set(obj, key, val) {
  // 进行响应式处理
  definReactive(obj, key, val)
}

// proxy代理函数: 让用户可以直接访问data里的属性
function proxy(vm, key) {
  Object.keys(vm[key]).forEach(k => {
    Object.defineProperty(vm, k, {
      get() {
        return vm[key][k]
      },
      set(v) {
        vm[key][k] = v
      }
    })
  })
}

// 根据value 类型做不同的操作(数组和对象)
class Observer {
  constructor(value) {
    this.value = value
    // 应该需要判断value 类型, 然后对对象和数组进行不同的操作
    // 这里只处理对象
    // 遍历对象
    this.walk(value)
  }

  walk(obj) {
    Object.keys(obj).forEach(key => {
      definReactive(obj, key, obj[key])
    })
  }
}

class kvue {
  constructor(options) {
    // 0: 保存options
    this.$options = options
    this.$data = options.data
    // 1. 将data做响应式处理
    observe(this.$data)
    // 2. 为$data做代理
    proxy(this, '$data')
    // 3. 编译模板
    new Compile('#app', this)
  }
}

class Compile {
  // el - 宿主元素, vm - kvue 实例
  constructor(el, vm) {
    this.$el = document.querySelector(el)
    this.$vm = vm
    // 解析模板
    if (this.$el) {
      // 执行编译方法
      this.compile(this.$el)
    }
  }
  compile(el) {
    // el是宿主元素
    // 遍历,判断当前遍历元素的类型
    el.childNodes.forEach(node => {
      if (node.nodeType === 1) {
        // console.log('编译元素', node.nodeName)
        // 节点编译
        this.compileElement(node)
      } else if(this.isInter(node)) {
        // 文本, {{xxxx}}
        // console.log('编译文本', node.textContent, RegExp.$1)
        // 将文本转义一下
        this.compileText(node)
      }
      // 递归 ,判断node是否还有child
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }

  // 判断插值表达式
  isInter(node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }

  // 编译文本
  compileText(node) {
    // node.textContent = this.$vm[RegExp.$1]
    this.update(node, RegExp.$1, 'text')
  }

  // 编译元素节点: 分析指令, @事件
  compileElement(node) {
    // 获取属性遍历值
    const nodeAttrs = node.attributes
    Array.from(nodeAttrs).forEach(attr => {
      // 指令: k-xxx 开头
      const attrName = attr.name
      const exp = attr.value
      if (this.isDirective(attrName)) {
        const dir = attrName.substring(2) // 得到xxx
        // 指令的实际的操作方法
        this[dir] && this[dir](node, exp)
      }
    })
  }

  // 判断是否是指令
  isDirective(attrName) {
    return attrName.indexOf('k-') === 0
  }
  // 执行text指令对应的更新函数
  text(node, exp) {
    // node.textContent = this.$vm[exp]
    //需要调用update方法
    this.update(node, exp, 'text')
  }
  // k-text 对应的操作函数
  textUpdater(node, val) {
    node.textContent = val
  }
  // k-html 对应的操作函数
  html(node, exp) {
    // node.innerHTML = this.$vm[exp]
    this.update(node, exp, 'html')
  }
  htmlUpdater(node, val) {
    node.innerHTML = val
  }
  // 提取update, 初始化和更新函数创建
  update(node, exp, dir) {
    const fn = this[dir+'Updater']
    // 初始化过程
    fn && fn(node, this.$vm[exp])
    // 更新
    new Watcher(this.$vm, exp, function(val) {
      fn && fn(node, val)
    })
  }
}

// Watcher: 跟视图中的依赖是一对一的关系 1:1
// const watchers = []
class Watcher {
  constructor(vm, key, updaterFn) {
    this.vm = vm
    this.key = key
    this.updaterFn = updaterFn
    // 依赖收集
    // watchers.push(this)
    Dep.target = this
    this.vm[this.key] // 触发上面的get
    Dep.target = null
  }

  update() {
    this.updaterFn.call(this.vm, this.vm[this.key])
  }
}
// 和某个key, 一一对应, 管理多个Watcher, 数据更新时通知他们做更新工作
class Dep {
  constructor() {
    this.deps = []
  }

  addDep(watcher) {
    this.deps.push(watcher)
  }

  notify() {
    this.deps.forEach(watcher => watcher.update())
  }
}

该版本并没有涉及到虚拟dom, 虚拟dom讲解, 会放到后面.

Vue源码解析(一)，Vue中DOM的挂载过程
qq_36297981的博客
05-05 3342
1.从入口开始 new Vue()做了什么 从入口文件开始，我们来分析一下new Vue()做了哪些工作，Vue实际上是一个类，我们通过new Vue() 来创建一个Vue实例。现在来看一下源码，在src/core/instance/index.js function Vue (options) { // 判断是否通过new 创建Vue实例 if (process.env.NODE_ENV...
一看就懂的vue简版源码概述
weixin_43867717的博客
09-08 535
MVVM框架的三要素:数据响应式、模板引擎及其渲染。
Vue源码解析
超频化石鱼的博客
05-31 6830
本文仅对Vue主体做一个流程化的简单解析，其他详细功能的代码分析过程是相同的。阅读源码之前，首先要确保对Vue.js的使用较为熟悉。先知道怎么用，再研究怎么实现。 首先去github下载官方源码：https://github.com/vuejs/vue当前版本为2.5.17。解压缩。为了方便查看，导入到webstrom中：源码必然在src文件夹。查看src文件夹：从文件夹名看，compiler应该...
vue源码解析（源码解析学习大纲）
最新发布
轻风细雨_林木木
10-03 1554
虚拟DOM的使用使得Vue能够高效地管理DOM操作，提升应用性能。基本组件：通过Vue.extend或使用单文件组件（.vue 文件）定义。组件可以包含模板、脚本和样式。Props：组件可以通过props接收父组件传递的数据。Vue的组件系统使得开发者能够构建可维护和可复用的代码，增强了应用的结构化。Vue Router：用于管理应用中的导航和路由。Vuex：用于集中管理应用的状态，方便组件之间共享数据。这两者结合使用，可以有效地管理大型应用的复杂性。
Vue源码详细解析
大灰狼的小绵羊哥哥的博客
10-22 412
Vue源码详细解析教程包含了Vue中从数据observe到模板解析、transclude、compile、link、指令的bind、update、dom批处理更新、数组diff等等环节，基本涵盖了Vue整个生命周期过程。订阅新文章请watch本项目。 文章 主线剧情 Vue源码详细解析(一)--数据的响应化 主要介绍了Vue如何实现数据的相应化，以及面对getter/setter无法监...
Vue的源码解析
weixin_41421227的博客
03-09 359
https://www.cnblogs.com/libin-1/p/6845669.html 参考 vue虚拟DOM 的底层 使用了DomcumentFragment api 先创建一个内存池 将真实dom放进该内存池中 然后统一修改后再将节点通过appendchild()方法放回真实dom中 具体请参考本人github项目https://github.com/w...
vue的源码解析
vue
06-18 1349
一、目录结构 1、src ├──compiler#编译相关 ├──core#核心代码 ├──platforms#不同平台的支持 ├──server#服务端渲染 ├──sfc#.vue文件解析 ├──shared#共享代码 core目录：包含了Vue.js的核心代码，包括内置组件、全局API封装，Vue实例化、观察者、虚拟...
实现一个简单版本的vue及源码解析
li420520的博客
10-25 467
Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。 Let data to observable ...
Vue3 源码实战课程下载（附源码）
11-07
Vue3 源码实战课程是专为开发者设计的学习资源，旨在帮助学员深入理解 Vue3 的核心机制，提升开发技能，并能够自定义实现类似功能。通过这个课程，你将有机会一窥 Vue3 的内部运作，从而更有效地优化应用性能，提高...
vue template compiler模版解析模块源码解析
章鱼小丸子
01-05 9030
文章目录前言vue模版语法定义语法插值指令vue template compiler模版解析器现状定义结构parserHTML解释器optimizercodegen参考文献 前言 尤雨溪在vue官方文档里对于vue这样定义： Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 vue.js拥有自身定义的一套模版语法。相信大家一直对于vue的模版解析模块充满...
vue源码解析，所有功能讲解（vue2.0-source-master.zip）
11-23
Vue 2.0 版本在社区中广受赞誉，其源码解析对于开发者深入理解框架的工作原理、优化应用性能以及进行二次开发至关重要。这份"vue2.0-source-master.zip"压缩包提供了Vue 2.0的源代码和详细讲解，帮助开发者深入了解...
VUE源码解析
程文英
10-19 762
VUE源码理解 1.公式：UI=render(state) state是输入，UI是页面输出，VUE充当render()这个角色，当vue发现其state变化之后，经过一系列的加工，最终变化反映在UI上 Object的变化侦测 2.变化侦测 变化侦测是追踪状态，一旦数据发生变化，就会去更新视图 3.object的更新变化 let car = {} let val = 3000 Object.defineProperty(car, 'price', { enumerable: true, config
vue 源码解析
wanglun_的博客
07-14 3441
watch：watcher解析表达式，收集依赖，在依赖（表达式值）改变时触发回调（handler）；调用所有watcher的update更新。数据双向绑定：用Object.defineProperty方法重写data中每个数据的get，set方法，在get中执行依赖收集（执行 Dep.depend 方法）和set中派发更新通知（执行 Dep.notify 方法）。computed。
vue源码解析
mrzhangdulin的博客
09-19 281
Vuex 除了提供我们 Store 对象外，还对外提供了一系列的辅助函数，方便我们在代码中使用 Vuex，提供了操作 store 的各种属性的一系列语法糖，下面我们来一起看一下： mapState mapState 工具函数会将 store 中的 state 映射到局部计算属性中。为了更好理解它的实现，先来看一下它的使用示例： // vuex 提供了独立的构建工具函数 Vuex.mapState ...
从零实现vue-router：简单版Hash路由解析
"vue-router 源码之实现一个简单的 vue-router" 在前端开发中，Vue.js 是一个非常流行和强大的渐进式框架，而 Vue Router 则是它官方支持的路由管理器，用于处理单页面应用（SPA）中的页面导航。本篇文章将探讨如何...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值