本文主要根据vue3源码去理解清楚vue3的组件挂载流程（最后附流程图），根据个人阅读源码去解释，vue的组件是怎么从.vue单文件组件一步步插入到真实DOM中，并渲染到页面上。

话说vue3已经发布，就引起了大量前端人员的关注，木得办法，学不动也得硬着头皮学呀，本篇文章就简单介绍一下「vue3的数据响应原理」，以及简单实现其reactive、effect、computed函数，希望能对大家理解vue3响应式有一点点的帮助。话不多说，看下面栗子的代码和其运行的结果。

大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图

大家都知道，在网页中浏览器资源开销最大便是DOM节点了，DOM很慢并且非常庞大，网页性能问题大多数都是有JavaScript修改DOM所引起的。我们使用Javascript来操纵DOM，操作效率往往很低，由于DOM被表示为树结构，每次DOM中的某些内容都会发生变化，因此对DOM的更改非常快，但更改后的元素，并且它的子项必须经过Reflow / L...

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。出自阮一峰老师的ECMAScript 6 入门，详细点击[链接]

一个用webpack4打包的vue 的项目，参照vue-cli的webpack配置， 一步一步带你实现一个vue的打包的项目，每一个commit对应一个步骤。 github 地址 clone project git clone git@github.com:naihe138/nvue.git install npm install or yarn 一、初始化项目 初始化项目，用vue-loader来打包.vue文件，html-webpack-plugin插...

上面的这个例子，顺序打印出来的是fn1-1、fn2-1、fn3-1、fn3-2、fn2-2、fn1-2，现在只知道，调用next()函数就会把控制流程就跳到下一个中间件，知道执行所有完之后然后再逐步向上执行前一个next后面的代码。这根跟洋葱有很大的相像似性（如果你愿意一层一层一层的剥开我的心~~~）。

阅读好的框架的源码有很多好处，从大神的视角去理解整个框架的设计思想。大到架构设计，小到可取的命名风格，还有设计模式、实现某类功能使用到的数据结构和算法等等。

一直以来都想用自己所想的技术做一些个人小项目，之前的博客觉从视觉上和交互上得有点小小不满足，所以想着做一些小小的重构。陆陆续续花了两个多月的时间，原因是工作特别的忙（为自己懒惰找借口），所以知道今天才发布上线。在这里灰常感谢三毛同学和Surmon同学，此重构博客才可以实现。

GraphQL一种用为你 API 而生的查询语言，2018已经到来，PWA还没有大量投入生产应用之中就已经火起来了，GraphQL的应用或许也不会太远了。前端的发展的最大一个特点就是变化快，有时候应对各种需求场景的变化，不得不去对接口开发很多版本或者修改。各种业务依赖强大的基础数据平台快速生长，如何高效地为各种业务提供数...

在第一篇：介绍一下渐进式 Web App(离线) - Part 1中我们介绍了一个典型的PWA应该是什么样子的，并且介绍了一下sercer worker和应用壳（app shell），在第二篇[介绍一下渐进式 Web App（即时加载） - Part 2]([链接]，我们缓存了动态数据，并实现了从本地保存的数据中即时加载数据到页面中，也顺便介绍了web的一些数据库。

在上一篇，介绍一下渐进式 Web App(离线) - Part 1的文章中，我们讨论了典型的pwa应该是什么样子的并且同时也介绍了 server worker。到目前为止，我们已经缓存了应用壳。在 index.html和latet.html页面中，我们的应用已经实现了离线加载缓存数据。在重复访问时，它们的加载速度更快。在本教程第一部分的结尾，我们能够离...

Web开发多年来有了显著的发展。它允许开发人员部署网站或Web应用程序并在数分钟内为全球数百万人服务。只需一个浏览器，用户可以输入URL就可以访问Web应用程序了。随着 Progressive Web Apps的到来，开发人员可以使用现代Web技术向用户提供很好体验的应用程序。在这篇文章中，你会学习到如何构建一个离线的渐进式 web 应...

在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。

vue-picker vue-picker的组件，包括了（普通选择、联动选择、中国地址选择...）简单配置就可以出现一个强大的picker，感受下效果图。 demo demo 地址：[链接] install npm install vue-pickers --save 使用 普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用 {代码...} 属性参数说明 参数 说明 是否必须 ...

图灵机器人平台,基于自然语言处理、知识库和云计算等技术,为广大开发者、合作伙伴提供的一系列智能语义处理能力(包括语义理解、智能问答、知识库对接等)的服务平台。现在简单介绍一下用koa方式调用图灵机器人的智能服务。

因为升级到新的node版本，之前的通过很多上传图片的方式都已经不适用了，所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得。

一把桌子，一台电脑，一瓶红牛，一包纸巾，从白天到黑夜。历经一个多月的时间，从零到构思到设计，从设计到vue-ssr 的框架设计，然后再从前端的业务逻辑代码的实现，从 后台nodejs 的 koa2框架到数据库的设计到后端的业务逻辑的代码实现，从购买阿里云服务器到申请域名，然后到备案，整整一个时间下来，真的不容易。总算...

本文章是一个额外的篇章，它可以在你的React app中，帮助加快初始的加载组件时间。当然这个操作不是完全必要的，但如果你好奇的话，请随意跟随这篇文章一起用Create React App和 react路由4.0的异步加载方式来帮助react.js构建大型应用。

React 在组件之间流通数据.更确切的说，这被叫做“单向数据流”——数据沿着一个方向从父组件流到子组件。由于这个特性，对于没有父子关系的两个组件之间的数据交流就变得不是那么显而易见。这里 Redux 就排上用场了。Redux提供了一个解决方案，通过将应用程序所有的状态都存储在一个地方，叫做“store”。然后组件就可以“disp...

这是一个小小的有关react的小例子，希望通过一个小例子，可以让新手更好的了解到react、react-router4.0、redux的集中使用方法。 这是基于create-react-app来开发的，一种简单的快速创建 React web 项目的方式是使用 Create React App 工具，相当于一个react手脚架，此工具由 Facebook 开发并维护。如果你还没有使用过 c...

有时候我们封装一个ajax的get的方法需要把对象拼接到地址上面，这里我介绍一个Object.keys，这是一个非常好用对象属性。例如说 {代码...} 还有就是 从url的的某个参数获取对应的值，例如 {代码...} 先介绍一下Object.keys Object.keys()返回一个数组的元素是字符串对应可列举的发现直接在对象属性。属性的顺序是一样的,...

是这样子滴，有时候我们用vue框架的时候，要用到很多手势，像tap、doubletap、longtap......，当然现在网上有很多手势裤什么的，拿来改一下也是可以实现自己想要的效果滴，我是希望用vue 的时候类似于

前几天一哥们，去面试遇到到一个用原生js 编写的事件监听， 原题是这样子滴！ {代码...} －－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－ 然后～～～就兴致勃勃的去看一下，大神的可以直接忽略， 就希望帮到一小部分的人～～就很开心啦！ 简单原理就是往addEventListener 里面的type挂载一个...