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

preface

Record && Accumulate! Previous articles started with a summary of some changes to Vue3. Please go directly to the summary of Vue3 at the end of this article

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…

Package source code TS –> JS

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 utility functions

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

2-3. | EMPTY_OBJ empty object EMPTY_ARR empty array

// Object.freeze() Freeze Object // The outermost layer of the frozen Object cannot be modified, but the inner one can be modified. The shallow frozen

In a development environment, modifying the frozen EMPTY_OBJ will throw an error; Error messages are not required in production environments

/ / / null objects
constEMPTY_OBJ = process.env.NODE_ENV ! = ='production' ? Object.freeze({}) : {}
/ / / an empty array
constEMPTY_ARR = process.env.NODE_ENV ! = ='production' ? Object.freeze([]) : []

const EMPTY_OBJ_1 = Object.freeze({})
EMPTY_OBJ_1.name = 'xn213'
console.log(EMPTY_OBJ_1.name) // undefined

const EMPTY_OBJ_2 = Object.freeze({ props: { mp: 'xn213' } })
EMPTY_OBJ_2.props.name = '213'
EMPTY_OBJ_2.props2 = 'props2'
console.log(EMPTY_OBJ_2.props.name) / / '213'
console.log(EMPTY_OBJ_2.props2) // undefined
console.log(EMPTY_OBJ_2)
/** * { * props: { * mp: 'xn213', * name: '213 * } * } */
Copy the code

6. IsOn (onAt the beginning,

Here is not familiar, the original development used in the source code are reflected:

IsOn () determines whether the string starts with on and is not followed by a lowercase letter

/// Notice the two ^ in the re. The first ^ begins with what, and the second is not

const onRE = /^on[^a-z]/
const isOn = (key) = > onRE.test(key)

isOn('onChange') // true
isOn('onchange') // false
isOn('on2hange') // true
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),

Sigh with emotion

No matter how big the life is, it is made up of countless small fragments

Only seriously treat each small fragment

Then you really take your whole life seriously