vue

vue3 支持用 jsx 实现组件，摆脱了 vue 文件式的组件，不再需要额外的指令，写法非常接近 React，减少记忆负担。 本文简单的练习，用 vue3 组件封装 input 组件和统一表单数据。

学习vue源码的过程中，发现尤大经常给类的实例加上了唯一的id，后期判断或者添加的时候非常便捷，我觉得是个很好的技巧，本文就说下这个小技巧。 怎么分配id 其实分配id，操作起来很简单，如下所示就搞定

响应式对象，核心就是利用 `Object.defineProperty` 给数据添加了 `getter` 和 `setter`。 这样在访问数据以及写数据的时候能自动执行一些逻辑

认识组件的注册过程，并理解全局注册和局部注册的差异。其实在平时的工作中，当我们使用到组件库的时候，往往更通用基础组件都是全局注册的，而编写的特例场景的业务组件都是局部注册的

vue项目是使用npm run serve打开的时候，会自动分配一个端口，比如http://localhost:8080/。

element-ui虽然有el-table组件，但是仍然需要手动写el-table-column。 这里希望进一步抽离配置，在 el-table的基础上封装个enhanced-el-table组件。 综上，enhanced-el-table组件的大概就出来了。 el-table…

element-ui虽然有el-form组件，但是仍然需要手动写el-form-item。 这里希望进一步抽离配置，在el-form的基础上封装个enhanced-el-form组件。 综上，enhanced-el-form组件的大概就出来了。 现在有一个很简单的表单，需要填写…

最近做年终活动，许愿的时候希望可以以弹幕的形式出现。 以下一步步，说明弹幕逻辑。本文的弹幕较为简单，重在说明弹幕逻辑。 先写段静态的文字。 但是一行通常不止一个弹幕，肯定不能block，所以这里的bullet-item需要处理下，这里我用定位的方式（主要为了之后的弹道，定位更方…

本文想写 vuex 源码中核心的一个类，ModuleCollection，这个类是将参数格式化成一定的结构。 感觉这种模式，在别的源码里也常用，希望自己能真正理解并运用，所以特地有此篇。 使用 c 模块的state的时候，是this.$store.state.b.c.msg。 …

vue-lazyload算是常用的一个插件了，一般用于图片的懒加载。 核心逻辑是： 图片在视图范围内，就显示，否则只显示加载图标。 而图片在不在视图范围内，是动态变化的，比如滚动的时候，图片就可能从视图外到视图内。 其实这里又是一个信息差，所谓信息差，是只要你知道了，基本就能解…

最近在看vue的课程，说到vue插件，其实还蛮希望有一天自己能写一个vue插件。 添加 Vue 实例方法，Vue.prototype.$xx=.. 如果你手上有好几个项目，每个项目都添加一些相似的全局方法、资源等，就可以试着写一个插件，这样方便管理，万一一不小心，可能成为网红，…

弹框组件有两个特点：一是弹框的元素一般是body的子元素，而不是位于#app内部；二是，使用的时候一般通过函数，比如Message("创建成功")。 其实只是信息差的事，很容易理解的。 一般，组件的模板编译之后，默认挂载在app里，但其实我们可以手动选择将其挂载在任意处。 这个…

以前觉得element-ui肯定特别难写，最近在看组件通信，就试试写下el-form，当做练习了，这样以后自己也能试着看懂/开发高阶组件。 本文，一步步来，读者如果有耐心的话，最好也自己手敲一遍。 先看看官网，关于el-form使用的demo，然后将重点复制到App.vue，再…

vue组件的数据通信方式很多，本篇汇总所有的方式一起说说，水平有限，不对的话，欢迎指正。 所谓的组件通信，就是一个组件获取另外一个组件的数据或者方法。 这么多方式，怎么选择呢。 首先，有个原则性的大判断，是不是在封装组件。 再继续，是不是父子组件。 首选，prop/$emit，…

vue 组件的数据通信方式很多，本篇着重讲作用域插槽slot。 slot的基本用法，这里不再赘述。 本篇强调的是，怎么通过slot来实现通信。准备来说，是在父组件里显示子组件给slot暴露的数据。 因为vue版本的原因，父组件使用slot的形式不一样，2.6.0以上使用新版本s…

vue 组件的数据通信方式很多，本篇着重讲ref/$refs，神助$nextTick。 作用：获取节点或组件实例。 场景：简单的获取节点或组件实例的属性或者方法，但并不改变其数据。 缺陷：必须在模板渲染之后，不是响应式的，时不时配合$nextTick。 ref 是以属性的方式存…

vue 组件的数据通信方式很多，本篇着重讲eventBus。 先说下，要是多层级组件复杂的通信，优先vuex，不复杂的可以用下eventBus。 但是哈，Vue 实例本身就有这样的一套逻辑，我们只需要弄个实例就行，并不需要我们写上面这一坨。

vue 组件的数据通信方式很多，本篇着重讲$parent/$children，神助是$broadcast/$dispatch。 $parent/$children的常用场景：封装嵌套组件时，直接使用长辈或者子孙组件的方法，该方法并不改变数据，常常结合$broadcast/$di…

vue组件的数据通信方式很多，本篇着重讲$attrs/$listeners，神助是v-bind="$attrs"/v-on="$listeners。 $attrs/$listeners的常用场景：封装第三方组件或者表单组件，从而减少组件处理成本。 使用组件的时候，vue内部会将…