Combination of the API

Composite API and optional API

The composite API is a new way of writing code provided in VUE3

General differences between vue2’s Option API and VUe3’s Composition API



Vue2



Vue3 to implement

summary

Advantages of Vue2 optional API: simple, each with its own functions Disadvantages: inconvenient function reuse, function code scattered maintenance code skip Vue3 combined API advantages: function code combined maintenance

Combination of the API

1 the setup function

role

Setup is a new component option that serves as a starting point for using composite apis in components. Setup cannot use this, which points to undefined 3. Only used once during component initialization 4. Executed before lifecycle hook functions

parameter

setup (props,context) {
  ...
  // props: is an object containing all prop data passed by the parent component
  // Context: The context object contains the attrs,slots,emit attributes
}
Copy the code

The return value

The return value is an object that specifies the data and functions to be used in the template. You need to declare in this object that setup() prevails if data with the same name is defined in data()

2 Life Cycle

Eight in vuE2

{
  beforeCreate(){ console.log('beforeCreate')},  
  created(){ console.log('created')},
  beforeMount(){ console.log('beforeMount')},
  mounted(){ console.log('mounted')},
  beforeUpdate(){ console.log('beforeUpdate')},
  updated(){ console.log('updated')},
  beforeDestroy(){ console.log('beforeDestroy')},
  destroyed(){ console.log('destroyed')}}Copy the code

Seven in VUE3

setup (props,context) {
  console.log('Before instance creation',props,context);
  onBeforeMount(() = >{
    console.log('Before mounting the DOM')
  })
  onMounted(() = >{
    console.log('After mounting the DOM');
  })
  onBeforeUpdate(() = >{
    console.log('Before updating components');
  })
  onUpdate(() = >{
    console.log('After updating components');
  })
  onBeforeUnmount(() = >{
    console.log('Before unloading destruction');
  })
  onUnmounted(() = >{
    console.log('After unloading and destruction'); })}Copy the code

You are not advised to use vuE2 and VUe3 together

3 ref function

role

Define reactive data

steps

1. Import from vUE framework 2. Call and pass in data 3 in setup function. The setup function returns the value of the ref call as an object

4 ref attribute

Vue3 steps

1. Import 2. Use the ref function to pass null to create a ref object 3. The template establishes the association by defining the name of the ref object created by defining the ref attribute equal to 1

<template>
  <div class="container">
    <div ref="dom">I am a box</div>
    <button @click="hClick">hello</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. Get a single element
    const dom = ref(null)
    function hClick () {
      console.log(dom.value)
    }
    return {dom, hClick}
  }
}
</script>
Copy the code

5 reactive function

role

Define complex data as responsive data

steps

Import 2. Invoke 3. Export

6 toRefs function

role

All attributes in the transformation reactive are defined as reactive data, which is usually used to deconstruct and expand reactive definition objects to simplify their use in templates

format

// Reactive data: {attribute 1, attribute 2}
let{properties1Attributes,2} = toRefs(responsive data)Copy the code

demo

7 ref and reactive

Two ways to define reactive data

  • The ref function (which can handle both simple and complex data) is used to define simple data types as responsive data, which needs to be supplemented when modifying or retrieving values in code. Value can be omitted from the template
  • Reactive functions are often used to define complex data types as reactive data
  • Recommended use
    • Use ref in preference
    • Use Reactive if you know exactly what properties are in the object, for example: Form data