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

preface

Record accumulation learning Vue3 and source code! Previous articles have made some changes to Vue3 learning summary at the beginning, please go directly to the end of the article Vue3 learning summary table:

Source code & documentation

  • Vue3 source repositoryvue-next: Github.com/vuejs/vue-n…
  • Official Chinese documents https://v3.cn.vuejs.org/guide/introduction.html Vue3. X
  • Vue3. X official Chinese document – Incompatible changes to the use of v-for keys

v-forThe usage of keys on nodes and non-nodes has changed

V-for is most commonly used in practical work. The back-end request data should be processed into iterable data and then rendered to the page through V-FOR, such as tables, lists, cards and so on. Each item in this iteration will have a different UID, which will be used to modify the key for deletion, etc. The key here is important.

Vue3. X Added automatic generation of unique keys

In ve2. X, the key of each branch item of V-if/V-else/V-else -if is necessary and needs to be configured by ourselves, and it is not recommended to use the index of the loop as the key. You’ve all stepped on the use-index-for-key trap.

So Vue3. X now automatically generates unique keys instead of adding them manually; If we had to add our own, we would have to make sure that each branch had a unique key, rather than forcing the reuse of branches by deliberately using the same key.

Vue3. X added non-compatible key values where to use

Use key on templates: the key of

<! -- Vue 3.x -->
<template v-for="item in data" :key="item._id">
  <span>{{ item._id }}</span>
  <div>{{ item }}</div>
</template>
Copy the code

Vue3 learning actual combat several small summary:

  • Vue3 source code learning tool utils(2)
  • 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),

Learning && Record accumulation come on