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

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

什么是队列

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

我们知道，栈只支持两个基本操作：入栈 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，从而使它关联的组件重新渲染。