本文基于Vue2 自定义了一个图片懒加载指令 v-lazy，主要涉及的知识有：自定义指令、事件总线、clientHeight与getBoundingClientRect这两个API。

前天有幸看了尤雨溪 、月影、 郭辉、屈光宇 几位大佬的 《畅聊 Vue 3.0 & 前端技术新趋势》，属实 vue3 生态周边大全 的一波好家伙给震撼到了； 虽然我看直播中说的最多的是 别更新了

一个使用 vite + vue3 + pinia + ant-design-vue + typescript 完整技术路线开发的项目

OK,兄弟们。前面一篇文章就说过要用指令的方式来实现图片的懒加载。其实，前端发展这么多年，要实现图片懒加载非常的简单，配合上Vue的指令，30行轻轻松松实现一个高复用的Vue指令。一起来看看吧。 这里我是用的IntersectionObserver API去实现的。 简单来说可…

再到现在的vue中，emit和on方法。他们都似乎不约而同的自带了发布订阅属性一般，让开发变得更加高效好用起来 就这两点吗？没错，点不在多，够用就行。我们都知道有一句很著名的谚语，罗马不是一天建成的 当然，胖子也不是一天吃成的。所以我们要想实现一个自己的发布订阅模式，以后在工作…

1 项目初始化 运行完以上命令之后,一个vue3.0的项目就可以了，目录如下： 那么接下来我们就参照vue2.x的全家桶来从零填充一下项目基础模块: 2 vite.config.js配置 3. vue

存在的问题：1. 页面刷新数据丢失；2.只在当前用户的浏览器中存在

前端应用在不断壮大的过程中，内部模块间的依赖可能也会随之越来越复杂，模块间的 低复用性 导致应用 难以维护，不过我们可以借助计算机领域的一些优秀的编程理念来一定程度上解决这些问题，接下来要讲述的 IoC 就是其中之一。 嗯，看起来没什么问题，但是实际应用中需求是非常多变的，可能…

在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本专栏将会一一揭晓。 在Vue源码中会把data中数据添加gett…