** For a computer, it only knows how to use memory addresses to access variables in memory. We have artificially separated two storage forms, one is continuous storage (that is, arrays), and the other is chained storage (linked lists). As for other data structures, they are actually the use of these two storage forms. Any data structure can be implemented in two storage forms, only the question of whether it is suitable or not, and there is no question of whether it is possible or not, because in the end, the memory address is used to access the memory. Queue, stack we usually use arrays to achieve, but can also use linked lists, such as trees we use linked lists in most cases, but in fact, like a complete binary tree array to achieve no problem.

This blog is mainly to analyze what features of data structures we need in these cases through some examples. In order to better meet these features, we need to use arrays or linked lists to implement. ** For all the content, I will not go into detail, let alone the specific implementation, because they are very basic, but if we really want to develop it, it will become a long talk. We mainly look at them from a higher level. some features.

What is a hash table

The English name of the hash table is “Hash Table”, and we usually call it “Hash Table” or “Hash Table”

The hash table uses the feature that arrays support random access to data according to subscripts, so the hash table is actually an extension of the array, evolved from the array. It can be said that if there is no array, there is no hash table.

Why do you say that? In fact, the storage of the so-called hash table is to extract some data from the data to be stored, calculate the index of an array according to a specific rule, and then store the data in the corresponding index position. The extracted data is called ** key (key), or the keyword **, this rule is called ** hash function **, and the calculated array index is ** hash value **, or Hash value.

Let’s take a specific example. We want to store a doc named ** abcd.txt ** in the hash table. We use the file name as the key to design a hash function. This hash function imported parameter is the file name. After a series of calculations, the index of the array is 3, so the content of this doc is stored in the place where the index of the array is 3. Next time I want to see if the doc of abcd.txt has been stored, I can execute the hash function again., get subscript 3, and then go to query whether there is data in the place where the subscript is 3.

Queue is an essential data structure when we are programming. It can be implemented with an array or a linked list. However, in fact, there are also some small places in the queue that will be forgotten because they will not be used for a long time. This time, I will recall it a little.

What is a queue

The concept of a queue is very easy to understand. You can think of it as a queue to buy tickets, the first to come buys first, and the later person can only stand at the end and is not allowed to jump in line. First in first out, this is a typical “queue”.

We know that the stack only supports two basic operations: push () and pop (). Queues are very similar to stacks and support very limited operations. The most basic operations are also two: enqueue (), which puts a piece of data at the end of the queue; dequeue (), which takes an element from the head of the queue.

As one of the core features of the component, ‘Props’ is also one of the features we usually contact the most in the development of Vue projects. It can enrich the functions of the component and is also a channel for communication between parent and child components.

Here thanksustbhuangyiBoss massive open online course.

Previous article aboutVue Watcher原理分析的文章中After explaining the source code of Vue watcher, the watcher is divided into three categories, namely userWatcher, computeWatcher, and renderWatcher.

One of the main differences between these three is the difference in finding Watcher.value. The value of userWatcher is our observation object, the value of computeWatcher is evaluated through the handler we defined in the computed property, and the value of renderWatcher is the result of updating the view.

The previous blog mainly talked about the first two. There is no detailed explanation of the specific update view process of renderWatcher, that is, update. The main logic of this is the diff algorithm of vue.

This blog will talk about the diff algorithm of vue, and through this algorithm, we will talk about some related precautions when we usually write vue.

Introduction

With the reading of the vue source code, I gradually found that Watcher is everywhere. Whether it is the principle of responsiveness, or the calculation of properties, the listening properties all use Watcher, and almost most of the features of Vue are inseparable from Watcher.

It even gives me a feeling that Vue is going big, that is, how to establish the relationship between data and Watcher, how to trigger Watcher updates when data changes, and how to update Watcher.value.

How this is updated determines what the Watcher is. If it is an updated view, it is a rendered Watcher, and if it is a computeWatcher, it is an updated calculation property.

Vuex

In this section, we mainly analyze the initialization process of Vuex, which includes two aspects: installation and Store instantiation process.

The installation process is relatively simple. The following image is a simple mind map about instantiation.

Another core idea of Vue.js is component. The so-called component is to split the page into multiple components, and the CSS, JavaScript, templates, images and other resources that each component depends on are developed and maintained together. Components are resource-independent, components can be reused within the system, and components and components can be nested.

When we use Vue.js to develop actual projects, we write a bunch of components to assemble and generate pages like building blocks. In the official website of Vue.js, we also spend a lot of time introducing what a component is, how to write a component, and the properties and characteristics that a component has.

Next, we will use the Vue-cli initialization code as an example to analyze a process of Vue component initialization.

1
2
3
4
5
6
7
8

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

var app = new Vue({
  el: '#app',
  //h is the createElement method
  render: h => h(App)
})

This article is mainly about the source code analysis of Vue Data drive, that is, how the variables we define in data are rendered on the page.

We analyze the vue source code with the compiler version to explain how data is rendered onto the page during page rendering.

A few days ago, leetcode’s difficulty level question of the day once again made me feel that the real smart people are good at converting difficult problems into simple problems, rather than going great lengths.

Link to the purpose of this question: https://leetcode-cn.com/problems/shortest-palindrome/solution/

Topic

Given a string s, you can convert it to a palindrome by adding characters in front of the string. Find and return the shortest palindrome string that can be converted in this way.

** Example 1: **

1
2

Enter: "aacecaaa"
Output: "aaacecaaa"

** Example 2: **

1
2

Enter: "abcd"
Output: "dcbabcd"