什么是散列表

散列表的英文叫“Hash Table”，我们平时也叫它“哈希表”或者“Hash 表”

散列表用的是数组支持按照下标随机访问数据的特性，所以散列表其实就是数组的一种扩展，由数组演化而来。可以说，如果没有数组，就没有散列表。

为什么这么说呢？其实所谓的散列表的存储是从要存储的数据中抽取出某些数据，根据某个具体的规则计算出一个数组的下标，然后将这个数据存储到对应下标的位置，抽取出来的数据叫做键（key），或者叫关键字，这个规则就叫做散列函数，计算得到的数组下标就是散列值，或者叫Hash值。

我们具体举个例子，我们要把一个名叫abcd.txt的文档存储在散列表中，我们就以文件名作为key，设计一个散列函数，这个散列函数入参就是文件名，经过一系列的计算，得到数组的下标是3，那么就把这个文档的内容存储在数组下标为3的地方，下次我想看一下是否存储过abcd.txt的文档，可以再次执行散列函数，得到下标3，然后去查询下标为3的地方是否有数据。

我们在上大学的时候会接触很多基本的排序算法，到了工作后其实我们很多时候用的都是语言自带的一些排序方法，所以就会有些生疏，这次重看《数据结构与算法之美》，对这些基本的排序算法又有了一点进一步的理解，索性就重新回顾一遍这些基本的排序算法，并从几个新的角度去理解和使用它们，本文所有的排序都是从小到大排序，并且是从王争老师的课程中提取了一点关于基本排序的知识按照自己的思维方式重新组织并实现了一次，加入了一点自己的联想，比如计数排序与前缀和的关系，从一个新的角度理解归并排序与快速排序的区别，但还是强烈建议大家去购买王争老师的正版课程，真正的由浅入深，这样每个人的知识树不一样，构建起来的知识体系也不同。

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

什么是队列

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

我们知道，栈只支持两个基本操作：入栈 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"