源码分析

本文为Varlet组件库源码主题阅读系列第九篇，读完本篇，可以了解到如何使用一个`div`创建一个点击的水波效果。

本文为Varlet组件库源码主题阅读系列第六篇，Varlet支持自定义主题及暗黑模式，本篇文章我们来详细看一下这两者的实现。

读完本文，你可以了解到如何通过编写一个`Vite`插件来支持使用`markdown`文件直接作为路由组件。

读完本文，你可以了解到如何将`svg`图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。

读完本文，你可以了解到如何将Vue3组件库打包成esm、esm-bundle、commonjs、umd四种格式。

`Varlet`是一个基于 `Vue3` 开发的 `Material` 风格的移动端组件库，本系列的文章会全面解析这个项目，包括组件库整体的设计，以按需引入、主题定制、屏幕适配、组件打包等话题。

本文会通过手写一个非常简单的乞丐版`Vite`来了解一下`Vite`的基本实现原理。分为上下两篇，上篇主要讨论如何成功运行项目，下篇主要讨论热更新。

上一篇文章这个高颜值的开源第三方网易云音乐播放器你值得拥有介绍了一个开源的第三方网易云音乐播放器，这篇文章我们来详细了解一下其中使用到的网易云音乐api项目的实现原理

上一篇我们看了引入Vue时都有哪些操作，这一篇我们来看一下new一个Vue实例时会发生什么，测试代码如下：

引入`Vue`时`Vue`做的事情其实就是创建了一个构造函数，然后在到处扩展原型方法、静态方法、静态属性等等。

笔者平时写文章使用的都是Markdown，但是发布的时候就会遇到一些平台不支持Markdown的情况，重排是不可能重排的，所以都会使用一些Markdown转富文本的工具，比如markdown-nice

在大型应用里，有些组件可能一开始并不显示，只有在特定条件下才会渲染，那么这种情况下该组件的资源其实不需要一开始就加载，完全可以在需要的时候再去请求，这也可以减少页面首次加载的资源体积...

jsBridge就是js和原生通信的桥梁，本文不讲概念性的东西，而是通过分析`jsBridge`源码，来从前端角度大概了解一下它是怎么实现的。

如果以前问我ES5的继承和ES6的继承有什么区别，我一定会自信的说没有区别，不过是语法糖而已，充其量也就是写法有区别，但是现在我会假装思考一下，然后说虽然只是语法糖，但也是有点小区别的，那么具体有什么

本文会参考知名的snabbdom库来手写一个简易版的，配合图片示例一步步完成代码，一定让你彻底理解虚拟`DOM`的`patch`及`diff`算法。

本篇来分析一下这两个问题，另外简单看一下自定义元素是怎么渲染的。 通过this.xxx访问计算属性时会调用我们定义的computed选项里面的函数。 其次在模板编译指令解析的阶段计算属性和普通属性并没有区别，这个v-text指令会创建一个Directive实例，这个Direct…

可以看到也是通过指令的方式，这个版本只有支持两个类，一个是进入的时候添加的v-enter，另一个是离开时候添加的v-leave。 这个指令不会创建watcher，因为指令的值要么是css的类名，要么是JavaScript动画选项的名称，都不需要进行观察。指令绑定时所做的事情就是…

它没有直接调用指令的update方法，而是交给了batcher，本篇来看一下这个batcher做了什么。 能清晰的发现通过异步更新能跳过中间不必要的渲染以达到优化性能的效果。 push方法做的事情是把watcher添加到队列quene里，然后如果没有扔过flush给nextTi…

多个过滤器之间使用|进行分隔。 带过滤器的会多一个filters字段。 可以看到完全就是为了得到目标值的一个多此一举的过程，下一步来支持逗号分隔的冒号表达式。 判断一下冒号之前的字符里是否存在?，存在的话就代表是三元表达式，则不进行分割。 因为过滤器支持带参数，参数和过滤器名之…

因为vue指令很多，功能也很多，所以会有很多针对一些情况的特殊处理，这些逻辑如果不是对vue很熟悉的话一时间是看不懂的，所以我们只看一些基本逻辑。 该方法会根据实例的一些状态来判断处理某个部分使用哪个方法，因为代码极大的简化了所以不是很明显。 所以linkFn以及nodeLin…