This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Learn Vue3 source record && accumulation! Before a few articles have made Vue3 some changes to learn the beginning of the summary, please go directly to the end of the Vue3 summary directory, this article through the study of chuange source code read to record learning Vue3 source code notes.

Source code & documentation

  • Vue3 source repositoryvue-next: Github.com/vuejs/vue-n…
  • Vue3 warehouse tools function source code: the vue – next/packages/Shared/SRC/index. The ts if slower access can also access the online Vscode (open source) : github1s.com/vuejs/vue-n…

Source code package TS –> JS easy to eat

Index. ts source code for easy reading, you can clone the source code, package into.js for viewing

git clone [email protected]:vuejs/vue-next.git
cd vue-next
Install dependencies, then package them directly
yarn
yarn build
Copy the code

Packaging code, and the utility functions in vue file – next/packages/Shared/dist/Shared. The esm – bundler. Js, the study can begin

Vue3 source tool functions (two)

According to the order of export in the source code, the record of selective learning is as follows:

7. IsModelListener listener (whether it starts with a string)

// startsWith is the method provided by ES6

MDN | startsWith () method is used to determine whether the current string starting with another given string, and returns true or false according to the results of the judgment.

Syntax: str.startswith (searchString[, position])

/// define the source code
const isModelListener = (key) = > key.startsWith('onUpdate:')

// use chestnuts:
isModelListener('onUpdate:change') /// true
isModelListener('222onUpdate:change') /// false
Copy the code

9. Remove Removes an item from the array

The remove() method is used on an array, finding the given value and removing it from the array

This is the splice method, the performance comparison method; Learning about the source code can also extend other source code reading: in axios, the element to be deleted is reset to NULL, and if null is executed, the execution is skipped.

/// define the source code
const remove = (arr, el) = > {
  const i = arr.indexOf(el)
  if (i > -1) {
    arr.splice(i, 1)}}/ / / use
const arr = [1.2.3]
remove(arr, 3)
console.log(arr) / / / [1, 2]
Copy the code

Vue3 learning actual combat several small summary:

  • https://v3.cn.vuejs.org/guide/introduction.html Vue3. X’s official document

  • Vue3- Initial experience,

  • Vue3- Life cycle and setup() function,

  • Vue3-computed & watch,

  • Vue3-teleport changes the root node to which the component is mounted,

  • Vue3-Suspense for asynchronous requests,

  • Vue3-defAsyncComponent Asynchronous component (new),

  • Vue3- Fragments (new),

  • Vue3-v-model (not compatible),

Hence the feeling

No matter how big the life (Vue3 source code) is also composed of countless small fragments (tool functions)

Only treat each little piece seriously

Then you really take your whole life seriously. Come on!