PS

  1. Since the company’s recent new project uses vue3+ TS + ANTDV + Vite technology stack, these days I have looked at the VUe3 system to understand the new features and writing method of VUe3. There are my own understanding and the definition in the direct excerpt of the document, you can put forward if you don’t understand well.

  2. The following is actually a mind map written with Markdown and rendered with markup. In addition, this document is more suitable for people who have a certain vuE2 foundation, and they can understand it

  3. Some concepts are not explained too much in VUe2, just listed to make the concept of VUE complete, of course, there will be additional updates

  4. Finally, the mind map rendered by the actual markup is posted

New responsive systems

  • Proxy
    • Compare defineProperty and value setter
    • Compatibility (completely abandon IE)
  • ref
    • Make use of the get and set implementations of objects
    • Intercepting changes to only one property (value)
    • Simple data structure
    • Complex objects are deeply responsive to objects through reactive functions
  • unref
    • If the argument is a ref, the internal value is returned, otherwise the argument itself is returned.
    • Is equivalent toval = isRef(val)? val.value: val
  • reactive
    • Implement using Proxy
    • Complex data structure, depth conversion
    • The essence is the proxy-wrapped data property
    • Formerly: Vue. Observables ()
    • You can think of it as a set of individual Refs
    • Ref assigned to Reactive is unpacked
  • isProxy
  • isReactive
  • toRaw
    • Returns the original object of the Reactive or Readonly agent
    • The overhead of reactive data processing that does not require proxy access/trace, while avoiding triggering changes
  • markRaw
    • The tag object is no longer converted to proxy, returning the object itself
  • shallowReactive
    • Create reactive proxies, but do not perform deep reactive transformations of nested objects
  • shallowReadonly
    • Create proxy only its property is read-only, does not perform the nested object read-only conversion
  • toRefs
    • Used to deconstruct responsive data and disassemble complex data into multiple REF data
    • The deconstructed data is no longer a responsive object
    • import { reactive, toRefs } from 'vue'
const book = reactive({
  author: 'Vue Team'.title: '2020',})let { author, title } = toRefs(book)
title.value = 'Vue 3 Detailed Guide' // We need to use.value as the title, now ref
console.log(book.title) // 'Vue 3 Detailed Guide'
Copy the code
  • toRef
    • Create a new REF for a property of a reactive data object
    • And maintain a reactive connection to the original object (modifiable with each other)
    • An available ref is also returned if the source property does not exist
  • isRef
  • readonly
    • A copy of reactive data does not affect the modification of the original reactive data, but the data after the copy cannot be modified
  • Computed: Calculates attributes 
    • import { ref, computed } from 'vue';
//
const count = ref(0);
const pluseOne = computed(() = > count.value + 1);
// get set
const plusOn = computed({
  get: () = > count.value + 1.set: (val) = > {
    count.value = val - 1; }})// The second argument can be passed to the starting hook function onTrack onTrigger
// onTrack is triggered when computed responsive data is tracked as a dependency
// onTrigger is triggered when the calculated response data value is modified
Copy the code
  • watchEffect
    • Execute the side effect function (callback) immediately and automatically track the reactive data since it
    • WatchPostEffect (alias)flush: postDOM information can be retrieved after DOM rendering is executed
    • WatchSyncEffect (alias)flush: sync
  • watch
    • Can listen to single or multiple data sources (first parameter)
    • Lazy execution of side effect functions, and must have dependent reactive data (second argument)
    • Depth: deep: true (third argument)
  • Style to use
    • scoped
    • :deep() can affect child components
      • .a :deep(.b) {}
    • : Slotted :slot selector used to directly select elements in a slot
      • :slotted(div) {}
    • :global marks the global style
      • :global(.red) {}
    • An SFC can have multiple style tags
    • V-bind binds to the style property

The life cycle

  • Options API
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeUnmount
    • unmounted
    • errorCaptured
    • renderTracked
    • renderTriggered
    • activated
    • deactivated
  • Composition API
    • BeforeCreate and Created are not required
    • onBeforeMount
    • onMounted
    • onBeforeUpdate
    • onUpdated
    • onBeforeUnmount
    • onUnmounted
    • onErrorCaptured
    • onRenderTracked
    • onRenderTriggered
    • onActivated
    • onDeactivated

Combined API and SETUP

  • Computed properties and lifecyls can be used separately from the Vue component and can be exported in a separate file
  • setup
    • A better way to associate composite API exports with views is as a carrier
    • Called before the component is created
      • BeforeCreate and created
      • Before data Property, computed Property, or Methods are resolved
      • Cannot use this
    • The life cycle can be exported for use in vUE 
      • onMounted(() = > { something });
Copy the code
    • You need to explicitly return the reactive data and methods defined in the Setup function
    • The return function can be rendered separately using the h function exported from VUE
    • parameter
      • Props: Responsive data, deconstruction using toRefs
      • Context: You can deconstruct it directly{ attrs, slots, emit, expose }
  • <script setup>
    • Syntax sugar for setup properties to make development smoother
    • Asynchronous functions can be called at the top level using await
    • You can go with the others<script>Label coexist
    • The top-level binding is exposed to the template
    • Use defineProps and defineEmits directly
  • Provide/Inject(dependency injection)
    • Used to transmit values across multiple components
    • Note that reactive data needs to be wrapped with REF or Reactive before being used
    • Modify the dependency data at the provide component as much as possible
    • If there is a need to modify data in the Inject component, you can pass in the modify function at provide
  • One example: the composite API implements the ability to get the mouse position 
    • import {ref, onMounted,onUnmounted} from 'vue'
export function useMouse(){
    const x = ref(0)
    const y = ref(0)
    function update(e) {
      x.value = e.pageX
      y.value = e.pageY
    }
    onMounted(() = > {
      window.addEventListener('mousemove', update)
    })
  
    onUnmounted(() = > {
      window.removeEventListener('mousemove', update)
    })
    return { x, y }
} 
Copy the code
  • Vueuse

Virtual DOM

  • Lightweight JavaScript objects

Mixin

Custom instruction

  • Those who need to operate on the DOM layer can customize an instruction
    • focus
    • permission
    • .

New built-in components

  • Fragment:
    • Vue 3 components no longer require a unique root node, eliminating many useless placeholder divs.
  • Teleport:
    • Allowing components to be rendered inside other elements is especially useful when developing popover components.
  • Suspense:
    • Asynchronous components, which make it easier to develop components with asynchronous requests.

Encapsulate your own components

  • component
    • defineProps
    • defineEmits
    • Slot
  • Form components (Understand the V-Model)
    • v-model
    • props: modelValue
    • let emits = defineEmits(['update:modelValue])
    • An example:<OrgSelect>
  • Hooks (useXxx)

TypeScript

  • The editor VSCode
    • Volar plug-in
  • defineComponent
  • Props: 
    • interface Book {
  title: string, year? :number
}  
fn: {
  type: Function as PropType<() = > void>},book: {
  type: Object as ProType<Book>
}
Copy the code
  • computed: computedProp(): string {}
  • ref: const year = ref<string | number>('2021)
  • reactive: const book = reactive<Book>()
  • componentconst model = ref<InstanceType<typeof MyComponent>>()
  • Type declaration filesrc/types/*.d.ts
  • Types of grammar
    • interface
    • as

Vite

  • vite.config.js

reference

  • Vue3 official document
  • Finally, if you are interested in markup, this tool is markdown to mind map and also provides VSCode plug-in