• 构建基础篇 2：webpack 在 CLI 3 中的应用
  构建基础篇 2：webpack 在 CLI 3 中的应用 webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。 而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，...
  2021-10-18 13:01:55 | FrontEnd
• 构建基础篇 1：你需要了解的包管理工具与配置项
  包管理 任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。 本文将详细介绍构建 Vue.js 项目相关的依赖包安装工具和相应的配置文件，为大家提供参考。 介绍 相信大家对于包管理工具的使用一定不会陌生，毕竟它已经成为前端项目中必不可少的一部分，为了照顾部分零基...
  2021-10-18 13:01:55 | FrontEnd
• 开篇：Vue CLI 3 项目构建基础
  序言 大家好，当你点进这个标题，开始阅读本章的时候，说明你对 Vue.js 是充满好奇心和求知欲的。 我之前写过一篇文章，这样评价 Vue.js，称它是“简单却不失优雅，小巧而不乏大匠”的作品，正如其官网介绍的“易用，灵活和高效”那样。其实框架是 Vue.js 的本质，而真正了解它的人则会把它当成一件作品来欣赏。 Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相...
  2021-10-18 13:01:55 | FrontEnd
• Vuex 状态管理的工作原理
  为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时，经常会遇到一些组件间共享的数据或状态，或是需要通过 props 深层传递的一些数据。 在应用规模较小的时候，我们会使用 props、事件等常用的父子组件的组件间通信方法，或者是通过事件总线来进行任意两个组件的通信。 但是当应用逐渐复杂后，问题就开始出现了，这样的通信方式会导致数据流异常地混乱。 这个时候，我们...
  2021-10-18 13:01:55 | FrontEnd
• 批量异步更新策略及 nextTick 原理
  为什么要异步更新 通过前面几个章节我们介绍，相信大家已经明白了 Vue.js 是如何在我们修改 data 中的数据后修改视图了。 简单回顾一下，这里面其实就是一个“setter -> Dep -> Watcher -> patch -> 视图”的过程。 假设我们有如下这么一种情况。 <template> <div> <...
  2021-10-18 13:01:55 | FrontEnd
• 数据状态更新时的差异 diff 及 patch 机制
  数据更新视图 之前讲到，在对 model 进行操作对时候，会触发对应 Dep 中的 Watcher 对象。 Watcher 对象会调用对应的 update 来修改视图。 最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上。 这一章就来介绍一下这个 patch 的过程，因为 patch 过程本身比较复杂，这...
  2021-10-18 13:01:55 | FrontEnd
• template 模板是怎样通过 Compile 编译的
  Compile compile 编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。 这部分内容不算 Vue.js 的响应式核心，只是用来编译的，笔者认为在精力有限的情况下不需要追究其全部的实现细节，能够把握如何解析的大致流程即可。 由于解析过程比较复杂，直接上代码可能会导致不了解这部分内容的同学一头雾水。 所以笔...
  2021-10-18 13:01:55 | FrontEnd
• 实现 Virtual DOM 下的一个 VNode 节点
  什么是VNode 我们知道，render function 会被转化成 VNode 节点。 Virtual DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。 最终可以通过一系列操作使这棵树映射到真实环境上。 由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实...
  2021-10-18 13:01:55 | FrontEnd