队列是我们编程时必不可少的数据结构，可以用数组实现，也可以用链表实现，但是其实队列也有一些小的地方因为长时间不用而会忘记，这次就来稍微回忆一下。

什么是队列

队列这个概念非常好理解。你可以把它想象成排队买票，先来的先买，后来的人只能站末尾，不允许插队。先进者先出，这就是典型的“队列”。

我们知道，栈只支持两个基本操作：入栈 push()和出栈 pop()。队列跟栈非常相似，支持的操作也很有限，最基本的操作也是两个：入队 enqueue()，放一个数据到队列尾部；出队 dequeue()，从队列头部取一个元素。

Props 作为组件的核心特性之一，也是我们平时开发 Vue 项目中接触最多的特性之一，它可以让组件的功能变得丰富，也是父子组件通讯的一个渠道。

在这里感谢ustbhuangyi大佬的慕课教程。

上篇关于Vue Watcher原理分析的文章中，在解释了Vue watcher的源码之后，将watcher分为了三类，分别是userWatcher，computeWatcher，以及renderWatcher。

这三者的主要不同之一就是求Watcher.value时的不同，userWatcher的value就是我们的观察对象，computeWatcher的value求值是通过我们在computed属性中定义的handler，而renderWatcher的value就是更新视图的结果。

上篇博客中主要讲的是前两者，对于renderWatcher的具体的更新视图的流程没有详细解释，也就是update，这其中最主要的逻辑就是vue的diff算法。

这篇博客就来讲一下vue的diff算法，并通过这个算法来讲一下啊我们平时写vue时的一点相关的注意事项。

引言

随着对vue源码的阅读，逐渐发现Watcher无处不在，无论是响应式原理，还是计算属性，侦听属性都用到了Watcher，几乎Vue大部分的特性都离不开Watcher。

甚至给我一种感觉，Vue往大了说，就是如何建立数据和Watcher的关系，数据变化时如何触发Watcher的更新，以及如何更新Watcher.value。

这个如何更新就决定了这个Watcher是什么，如果是更新视图，那就是渲染Watcher，如果是computeWatcher，那就是更新计算属性。

Vuex 初始化

这一节我们主要来分析 Vuex 的初始化过程，它包括安装、Store 实例化过程 2 个方面。

安装过程比较简单，下图是一个简单的关于实例化的思维导图。

Vue.js 另一个核心思想是组件化。所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套。

我们在用 Vue.js 开发实际项目的时候，就是像搭积木一样，编写一堆组件拼装生成页面。在 Vue.js 的官网中，也是花了大篇幅来介绍什么是组件，如何编写组件以及组件拥有的属性和特性。

接下来我们会用 Vue-cli 初始化的代码为例，来分析一下 Vue 组件初始化的一个过程。

1
2
3
4
5
6
7
8

import Vue from 'vue'
import App from './App.vue'

var app = new Vue({
  el: '#app',
  // 这里的 h 是 createElement 方法
  render: h => h(App)
})

本文主要讲的是Vue数据驱动的源码分析，即我们定义在data中的变量是如何渲染到页面上的。

我们以带compiler版本的vue源码进行分析，来解释页面渲染过程中是如何将数据渲染到页面上的。

前几天leetcode的一道困难级别的每日一题再次让我感受到真正的聪明人擅长的是把困难的问题转换成简单的问题，而不是死磕难题。

这道题目的链接：https://leetcode-cn.com/problems/shortest-palindrome/solution/

题目

给定一个字符串 s，你可以通过在字符串前面添加字符将其转换为回文串。找到并返回可以用这种方式转换的最短回文串。

示例 1:

1
2

输入: "aacecaaa"
输出: "aaacecaaa"

示例 2:

1
2

输入: "abcd"
输出: "dcbabcd"

Vue是一个MVVM框架，最吸引人的地方就是它的响应式。

官方解释

首先我们看一下官方文档中对响应式原理的解释。

如何追踪变化

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

RPC简介

RPC(Remote Procedure Call)：远程过程调用，它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的思想。

RPC （Remote Procedure Call）的主要功能目标是让构建分布式计算（应用）更容易，在提供强大的远程调用能力时不损失本地调用的语义简洁性。 为实现该目标，RPC 框架需提供一种透明调用机制让使用者不必显式的区分本地调用和远程调用。　　
RPC采用C/S模式。请求程序就是一个客户机，而服务提供程序就是一个服务器。首先，客户机调用进程发送一个有进程参数的调用信息到服务进程，然后等待应答信息。在服务器端，进程保持睡眠状态直到调用信息的到达为止。当一个调用信息到达，服务器获得进程参数，计算结果发送答复信息，然后等待下一个调用信息。最后，客户端调用进程接收答复信息，获得进程结果，然后调用执行继续进行。