wanggang_512的博客

（一）开篇：Vue 脚手架3.X项目创建基础概述Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js 的世界。那么接下来屏幕前的你不妨一起来和我从零开始构建一个 Vue 项目，体会一下 Vue.js 的精彩绝伦。依赖工具在创建一个Vue项目前，我们先要确保你本地安装了Node环境...

（十七）揭秘Vue模板编译技术连续2周多的下雨天终于过去了，今天挤出来一点时间，探讨一下Vue模板的编译技术，我们常见的模板很多，编译技术也不一样，今天详细着重探讨一下模板编译这块所用的技术。Compilecompile 编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。这部分内容不算 Vue.js 的响应式核心，只是用...

（十六）Virtual DOM(如何实现Virtual DOM的VNode节点)哈喽~，将近有4个月没有写点东西了，今天终于挤出来一点时间，继续整体之前预计完成的vue进阶的笔记。今天主要探索虚拟DOM；首先我们需要知道什么是VNode。什么是VNode我们知道，render function 会被转化成VNode节点。Virtual DOM其实就是一颗以javascript对象（VNod...

（十五）Vue.js 依赖收集原理一周没有整理笔记了，今天继续。前边一节笔记记录了vue.js的响应式系统的内部机制原理，今天我们整理一下响应式系统的依赖收集。什么是依赖收集直接描述术语可能有点唐突。我们在这里写2个小例子，来加深一下代码理解，再来解释依赖收集。示例一：初始化的html结构和初始化的data现在已经有了，这个时候发现address这个属性并没有在...

（十四）Vue.js响应式系统揭秘响应式系统Vue.js十一矿MVVM框架，数据模型仅仅是普通的javascript对象，但是对于这些对象进行操作时，却能影响对应的视图，它是怎么实现的呢？我怀着好奇的态度查阅了很多资料，原来它的核心实现就是响应式系统，尽管在使用Vue.js进行开发时不会直接修改响应式系统，但是理解它的实现可以很好的使用它，避开一些弯路。Object.defineP...

（十二）调试补充-调试和性能在开发中，我们难免会涉及到调试和检测性能等等。今天我们就来整理一下vue的几个调试和性能检测工具。 移动端调试由于在移动端无法打开控制台，所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试，但是只能使用移动版的chrome查看数据，兼容不好。怎么办呢？其实Vue也帮我们提供了移动端调试的工具 - vConsle。...

（十一）技术指引2-数据驱动的秘密说到数据驱动，可谓是是Vue的一大特点，其实也不是Vue自己的特色，在这之前Angular从1.x版本就又有了，到底什么是数据驱动呢？我个人理解的数据驱动就是数据的变化来改变某个逻辑或某种状态。那Vue的数据驱动又是什么呢？我个人的理解就是通过数据变化来改变Vue的视图。好像我说的还是很模糊，那么下边我就来个图文并茂。还是不懂，没关系。下边为了让大...

（十三）Vue.js 运行机制整体概览今天成都雨夹雪，早上骑车还是很冷的，忙里偷闲整理一下Vue的笔记，从今天开始开始整理深入Vue内部的运行机制的笔记。整体预览结合前十二篇笔记介绍的Vue项目入门的构建等等。使自己有个整体的知识体系，今天主要先从整体上了解整个Vue内部整体上的一个认知，就算是热热身吧。首先：先把vue框架的内部流程图抽象化一下（个人梳理，可能有不同见解，往谅解）...

（九）热身指南2-编写高复用的模块在生活中，重复的机械劳动会消耗我们的时间和精力，提高生产成本，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码的冗余，页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。 在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个...

（六）构建实战2-多页面应用的配置今天是周日，成都降了温，太冷，闲来无聊，继续整理一下笔记。上次的笔记主要是说构建单页面应用的一些相关知识点，今天突发奇想看待官网上说可以配置多页面程序，马上试一下。首先，说一下很多时候我们使用SPA就足够了，什么情况下使用多页面程序呢？当你的项目复杂度很高或者模块之间的差异变化非常大，完全无法复用，这个时候是不是思考一下多页面应用。下边记录一下探索多页面应用过...

（五）构建实战1-单页面应用的基本配置今天开始从Vue的内部入手，探索一下内部配置的基本构成，在了解这个之前，一定要去了解一下Vue项目的配置是如何划分的。配置1、路由配置我们想一下，由于Vue的框架是一个或者多个单页面构成的,在单页面内部跳转根本不会重新渲染html文件，所以要引入路由机制对它进行控制，因此我们在项目内部要编写相应的路由机制，借助它实现页面被的跳转。我们先看一下vue...

（四）构建基础进阶-env文件与环境设置我们在实际开发中，我们一般会经历项目的开发阶段，测试阶段，和最终上线阶段，每个阶段对于项目代码的需要可能都有所不同，那我们怎么让它在不同阶段呈现不同的效果呢？我们下面看一下环境是不是可以解决这个问题呢？介绍1、配置文件正确的配置环境首先我们要认识一下不同配置之间的关系。随便画个图表示一下：这里说的是最全的的可能，我们可以看到不同的环境有着不同的配...

（三）构建基础进阶-Webpack使用cli 3.xwebpack作为目前最火爆的项目打包工具，被广泛的适用于项目的构建和开发过程中，其实说他是打包工具，有点狭隘了，我个人认为扎实一个集前端，自动化、模块化、组件化域一体的系统，可以根据自己的配置和安装，最终实现你需要的功能进行打包输出。在Vue中，webpack有着举足轻重的作用，比如说打包压缩、异步加载、模块化管理等等，如果你还对webpa...

（二）包管理工具与配置项任何一个使用自动构建工具的项目都离不开工具和统一的管理机制，一样的在项目开发和维护的过程中我们需要了解和掌握安装包的相应工具和配置文件，以此来有效的进行项目迭代和版本管理，为项目提供稳定的运行环境。接下来我们介绍一下Vue的相关依赖安装工具和配置文件。概述1、npm和package.jsonnpm 是Node Package Manager的简称。看了全程，知道他是...

（十）技术指引1-组件职能划分今天在整理笔记的时候，我思考了很久要不要写这篇笔记，最后决定把他写出来，因为里边有些东西我是查阅了一些资料才搞明白的。记下来，2点好处，一是加强记忆；二是做个备忘。说起组件，在当先流行的一些前端框架都是极为推崇的，是主流框架中模块化、组建化开发模式中不可缺少一种形式。是不是组件就可以随便写呢？带着这个问题，我们探讨一下组件的职能，我个人认为不同的组件可能实...

（八）热身指南1-编码技巧与规范前面几章笔记完成了项目的构建，进入开发阶段之前，除了了解了Vue框架本身的一些知识点外，我决定好事提前掌握一些项目的编码技巧及规范；这样的好处是可以从一开始就考虑到项目的维护、扩展及性能等常见问题。俗话说，只看不练假把式；我们在看一些编码技巧的时候最好还是敲一下，并结合代码反复推敲增强理解和认识，但是呢，我们发现一些代码不仅仅适用于Vue，其他前端的项目也适...

今天周四成都依然很冷，最近发烧感冒个人状态也不好。好了，还是继续今天的笔记吧。前年的几章笔记记录了Vue项目的构建的整体流程，从无到有的实现了单页面应用和多页面应用的配置，环境等等。今天我们回头看一下针对之前的配置是否可以有优化方案，同时也是我自己摸索的过程。使用alias简化路径使用webpack构建过Vue或者React的朋友们可能都知道alias的作用，其实就是把复杂的文件路径定义成一个...

（十八）揭秘数据更新的diff和patch机制数据更新视图之前笔记中简单提过，在对 model 进行操作对时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上。今天就来仔细探讨一下这个 patch 的...