Vue.js | 「A4纸」前端开发博客

Vue 中使用 json 定义生成表单（支持 ElementUi / iview / Ant Design Vue）

背景

之前已经在项目中实现过类似的功能，就是要通过后端接口返回的 json 动态输出相应的表单。但之前的实现方式是通过条件判断来根据 json 定义的类型输出相应的组件组成表单。本次遇到类似的需求，实现方式想通过 Vue 中的 component :is 的方式继续阅读“Vue 中使用 json 定义生成表单（支持 ElementUi / iview / Ant Design Vue）”

给 vue-easytable 表格增加树节点功能

背景

同事在使用一个 vue 表格组件 vue-easytable 时遇到了点麻烦，现在项目中出现了一个需求就是要给表格增加树节点功能，让表格中的行可以展开与收缩，我们知道使用 element UI / ant-design-vue 中的表格是自带树节点功能的。但是老项目如果要更换组件的话已经是不大可能，于是需要帮忙加上树结构功能继续阅读“给 vue-easytable 表格增加树节点功能”

Vue 中递归调用节点组件自身实现无限节点的树

前言

在之前一篇《Vue 中使用渲染函数 render 实现无限节点的树》中我们介绍了如何使用 render 函数中的 h 函数来实现无限节点树的渲染，但这种方式有很多小伙伴们可能使用起来不是很习惯。有没有一种更加直观的方式来实现呢？其实是有的，就是我们可以递归调用树节点组件自身实现无限节点继续阅读“Vue 中递归调用节点组件自身实现无限节点的树”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/collectionHandlers.ts

前言

接着上一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象， new Proxy(target, handler) 中的基础 handler（baseHandlers）。这一篇，我们将来介绍另外一种 handler 叫 collectionHandlers。collectionHandler 比 baseHandler 提供了更加丰富的 OperationTypes（set、add、delete、clear、get、has、iterate）中更齐全的操作的继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/collectionHandlers.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts

前言

回到之前有一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象，定义一个 Proxy 对象是怎么样呢？请看代码： new Proxy(target, handler) 可以看出来，是需要 target 与 handler 来实现，在本篇中我们就来看看实现这个 handler 的最基础的两种叫 mutableHandlers 与 readonlyHandlers，继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/baseHandlers.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/computed.ts

前言

前一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts》中，我们学习了用于响应数据读写变化的方法（在 vue 3 中会把用户传入的响应方法/响应函数再次封装而成为 effect 或者叫 ReactiveEffect），现在我们来介绍一种依赖于一种依赖于 effect 的扩展于 Ref 的响应式数据类型 computed（ComputedRef），相信用过 vue 的人都大概会猜到 computed 应该于 vue 1.x / vue 2. x 中的 computed 有很大的继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/computed.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts

前言

前两篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》和《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/ref.ts》中，我们学习了如何把目标数据或者目标对象封装成了响应式的或者对象，但除用于响应数据读写变化的方法（在 vue 3 中会把用户传入的响应方法/响应函数再次封装，然后成为本篇介绍的 effect 或者叫 ReactiveEffect），我们还没有涉及，继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/effect.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/ref.ts

前言

上一篇《Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts》我们学习了使用 Proxy 实现的 reactive 构造出来的响应式的对象，但 reactive 接受的值的参数限于 Object, Array, Map, Set, WeakMap, WeakSet 这些类型，而本篇介绍的 ref 与 reactive 也类似，但可以接收任何类型的值的参数。而且对值的监听的实现方式也不一样，继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/ref.ts”

Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts

前言

今天突然回忆自己的前端成长之路，自己为什么要学习各种框架及库源码，学习各种源码有什么好处呢？其实感觉自己的能力或多或少是伴随着一系列的前端源码学习而不断进步的。

当年学习 jQuery 的源码学习到了 extend 对象 merge 及入参 options / default options 、链式调用、如何实现链式调用和如何与各种 Dom 打交道；当年学习 weui 学习到了移动端如何处理 1 像素 border 处理、继续阅读“Vue 3 Pre-Alpha / vue-next 源码学习之 vue/reactivity/reactive.ts”