明么-优快云博客

原创 Vue源码解读（七）：模板编译

在最开始的章节提到过，我们在使用 vue-cli 创建项目的时候，提供了两个版本供我们使用， Runtime Only 版本和 Runtime + Compiler 版本。Runtime Only 版本是不包含编译器的，在项目打包的时候会把模板编译成 render 函数，也叫预编译。Runtime + Compiler 版本包含编译器，可以把编译过程放在运行时做。入口这一块代码量比较多，主要是对各种情况做了一些边界处理。这里只关注主流程。对细节感兴趣的伙伴们可以自行去研究。一般我们使用 Runtime

2021-09-28 09:21:31 606

原创 Vue源码解读（六）：update和patch

Vue 的 _update 是实例上的一个私有方法，主要的作用就是把 VNode 渲染成真实的 DOM ,它在首次渲染和数据更新的时候被调用。在数据更新的时候会发生新 VNode 和旧 VNode 对比，获取差异更新视图，我们常说的 diff 就是发生在此过程中。_update// src/core/instance/lifecycle.jsVue.prototype._update = function (vnode: VNode, hydrating?: boolean) { const v

2021-09-22 09:58:00 1225

原创 Vue源码解读（五）：render和VNode

Vue 2.0 相比 Vue 1.0 最大的升级就是利用了虚拟DOM。在 Vue 1.0 中视图的更新是纯响应式的。在进行响应式初始化的时候，一个响应式数据 key 会创建一个对应的 dep，这个 key 在模板中被引用几次就会创建几个 watcher。也就是一个 key 对应一个 dep，dep 内管理一个或者多个 watcher。由于 watcher 和 DOM 是一对一的关系，更新时，可以明确的对某个 DOM 进行更新，更新效率还是很高的。随着应用越来越大，组件越来越多，一个组件就可能存在大量的

2021-09-18 09:59:08 955

原创 Vue源码解读（四）：更新策略

之前介绍过初始化时 Vue 对数据的响应式处理是利用了Object.defifineProperty()，通过定义对象属性 getter 方法拦截对象属性的访问，进行依赖的收集，依赖收集的作用就是在数据变更的时候能通知到相关依赖进行更新。通知更新setter当响应式数据发生变更时，会触发拦截的 setter 函数，先来看看 setter ：// src/core/observer/index.jsexport function defineReactive ( obj: Object, k

2021-09-15 10:26:50 330

原创 Vue源码解读（三）：响应式原理

Vue 一大特点就是数据响应式，数据的变化会作用于视图而不用进行 DOM 操作。原理上来讲，是利用了 Object.defifineProperty()，通过定义对象属性 setter 方法拦截对象属性的变更，从而将属性值的变化转换为视图的变化。在 Vue 初始化时，会调用 initState ，它会初始化 props ，methods ，data ，computed ，watch 等.响应式对象initState// src/core/instance/state.jsexport functi

2021-09-14 09:26:01 615

原创 Vue源码解读（二）：初始化和挂载

初始化流程new Vue我们在使用 Vue 的时候，首页就是先 new Vue(...) ；在上一章中通过分析构建流程，我们得出入口文件 src/platforms/web/entry-runtime-with-compiler.js ，通过入口文件，我们一步一步找到 Vue 构造函数定义所在：// src/platforms/web/entry-runtime-with-compiler.js// ...import Vue from './runtime/index'// ...// s

2021-09-12 20:39:01 340

原创 Vue源码解读（一）：准备工作

前言Vue3 出来也有好一整子了，但 Vue2 的源码原理学习，不论在升职加薪还是在另谋高就的路上，一直是一个必要的环节，正应了“面试造火箭，上班拧螺丝”这句话。尽管之前对 Vue2 的源码也有学习过，但是一直没有进行一个系统的总结，说白了就是懒。最近在掘金上看到李永宁大佬的《Vue 源码解读》系列文章后，又开始蠢蠢欲动了。这次主要是对核心实现的一个梳理，细节方面不会太过介绍。源码地址本次学习的 Vue源码为 2.6.14 版本，git命令下载：git clone https://git

2021-09-08 09:38:21 262

原创 Vue源码解读（预）：手写一个简易版Vue

MVVM 设计模式，是由 MVC、MVP 等设计模式进化而来，M - 数据模型（Model），VM - 视图模型（ViewModel），V - 视图层（View）。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：Vue中的MVVM思想使用 MVVM 设计模式的前端框架很多，其中渐进

2021-09-07 19:00:59 304

原创 Vue Router简单版实现

SPA(single page application) :单页面应用程序，只有一个完整的页面，加载时，不会加载整个页面。当路由发生变化时，监听路由的变化，不会请求页面，而是只更新视图。路由描述的是 URL 与 UI 之间的映射关系，即 URL 变化引起 UI 更新（无需刷新页面），在 Vue 生态种提供了 VueRouter ，来实现单页面前端路由。VueRouter 常用的模式有两种：Hash模式和 History模式。Hash模式VueRouter 默认 hash 模式。hash 是 URL 中

2021-08-26 09:01:59 101

原创 Vue实现Alert插件

实现alert插件在Vue中我们可以使用 Vue.component(tagName, options) 进行全局注册，也可以是在组件内部使用 components 选项进行局部组件的注册。全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。有一些全局组件，类似于Message 、Toast 、 Loading 、 Notification 、Alert 通过原型的方

2021-04-23 20:26:27 5085

原创 Vue之组件化理解

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。组件通信props父给子传值// 父组件<HelloWorld msg="Welcome to Your Vue.js App"/>// 子组件props: { msg: String }自定义事件子给父传值// 父组件<Car

2021-04-21 11:34:54 296

原创 Git常用命令和多账号配置

团队合作开发中少不了版本控制管理工具，由于近期公司项目从 SVN 更换成 Git ，这里主要做一个复习总结。 SVN 和 Git 最主要要的区别： SVN 是集中式的， Git 是分布式的。 Git 的优势在于易于本地增加分支和分布式的特性，可离线提交，解决了异地团队协同开发等 SVN 不能解决的问题。Git 最核心的一个概念就是工作流。工作区(Workspace) 是电脑中实际的目录。暂存区(Index) 类似于缓存区域，临时保存你的改动。仓库区(Repository) ，分为本地仓库和远程仓库

2021-04-10 15:47:44 173

原创 node+koa2+mongodb搭建RESTful API风格后台

RESTful API风格在开发之前先回顾一下，RESTful API 是什么? RESTful 是一种 API 设计风格，并不是一种强制规范和标准，它的特点在于请求和响应都简洁清晰，可读性强。不管 API 属于哪种风格，只要能够满足需要，就足够了。API 格式并不存在绝对的标准，只存在不同的设计风格。API 风格一般来说 API 设计包含两部分: 请求和响应。请求：请求URL、请求方法、请求头部信息等。响应：响应体和响应头部信息。先来看一个请求 url 的组成：https://www.b

2020-12-12 10:54:26 1096 2

原创 Linux 服务器(CentOS)安装配置mongodb+node

准备服务器既然是在服务器上操作，那服务器肯定得准备好，我这里购买的是阿里云的服务器(CentOS 8)，因为我自己使用的电脑是 MacBook Pro , 所以下文中统一默认环境为：CentOS 8、mac 终端;服务器公网 IP 统一以：110.110.110.110 来举例。首先登陆服务器，root 是阿里云服务器默认的账号名，终端输入命令之后会提示输入你的服务器密码(输入密码的时候是不显示的)。ssh root@110.110.110.110window 系统，可以用 Xshell 或

2020-12-06 11:26:59 287

原创 Nuxt 开发搭建博客

众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案。服务端渲染 (SSR) 就是常用的一种。 SSR 有利于搜索引擎优化(SEO, Search Engine Optimization) ，并且内容到达时间(time-to-content) （或称之为首屏渲染时长）也有很大的优化空间。Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。项目地址：明么

2020-11-25 21:04:32 736

原创 puppeteer前端利器

Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，同时还有 Headless Chrome。用来模拟 Chrome 浏览器的运行。它提供了高级API来通过 DevTools 协议控制无头 Chrome 或 Chromium ，它也可以配置为使用完整（非无头）Chrome 或 Chromium。学习 Puppeteer 之前我们先来了解一下 Chrome DevTool Protocol 和 Headless Chrome。Chrome DevTool Pro

2020-11-20 22:10:48 1270 1

原创 WebSocket入门使用教程

一、WebSocket 介绍WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成

2020-11-17 22:39:02 4744

原创模块化-CommonJs、AMD、CMD、ES6

在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。模块化理解1. 什么是模块将复杂的程序依据一

2020-11-16 21:13:35 357 1

原创 CSS圣杯布局、双飞翼布局详解

三栏布局中，经典中的经典应该就是圣杯布局、双飞翼布局没跑了。双飞翼布局和圣杯布局其实是一样的，只不过在写法上有些不同，其布局都是左右固定宽度，中间宽度自适应。先熟悉一下圣杯布局、双飞翼布局中的特点：两侧定宽，中间自适应主要内容优先渲染圣杯布局<div class="container"> <div class="main">main</div> <div class="left">left</div> <

2020-11-12 22:27:43 323

原创 CSS两列布局多种方式

两列布局（一侧固定宽度，一侧自适应），在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。absolute + margin 方式<div class="container"> <div class="sidebar">固定</div> <div class="main">自适应</div&gt

2020-11-12 22:26:00 933

qq_35500568的博客