Composition API premise

One 、setup Use of

1. In order to start using Coposition API, We need one that can actually use it （ Where to write code ）;

2. stay Vue In the component , This position is setup function ;

Two 、setup Understanding of

setup In fact, it is another option of the component ：

But this option is so powerful that we can use it to replace most of the other options abbreviated before ;

such as methods、computed、watch、data、 Life cycle and so on .

3、 ... and 、setup Use of functions ( Pay attention to setup There is no binding inside this Of )

1. First of all, we have to understand setup Which parameters of the function ？

    A: It has two main parameters :

      The first parameter ：props ( Properties passed by the parent component ）

       The second parameter ：context： It contains three attributes

       attrs: All the non props Of attribute;

       slots: Slot passed from parent component ( This will work when returned as a render function ）

       emit: When we need to send events inside the component, we will use emit( Because we can't access this, So you can't pass this.$emit Send out an event )

export default {
  props:{
    message:{
      type:String,
      required:true
    }
  },
  //  Parameters 1:props, Properties passed by the parent component 
  //  Parameters 2:
  //  The way 1:
  // setup(props,context){
  //   console.log(props.message); // Parameters 1
  //   console.log(context.attrs.id)
  // }
  // 
  //  The way 2: Yes context Make a deconstruction 
  setup(props,{attrs,slots,emit}){
    console.log(props.message); // Parameters 1
    console.log(attrs.id);
    console.log(slots);
    console.log(emit);
  }

   2.setup What kind of return value does the function have

setup The return value can be in the template template Is used in ;

That is to say, we can pass setup Instead of data Options ;

 setup(){
    let counter=100;
    //1. stay setup  It defines a local function 
    const increat=()=>{
     counter++
     console.log(counter);
    }
    return{
      counter,
      increat    //2. Return this function 
    }
  }

Four 、setup Not available this

1. The meaning of the expression is this Does not point to the current component instance ;
2. also stay setup Before being called ,data、computed、methods And so on have not been resolved
3. therefore Cannot be in setup In order to get this;

5、 ... and 、 How to read the source code ：

  6、 ... and 、 How to be in setup It makes the data responsive

 （1）reactive  API     Help data to be responsive

<template>
<div id="app">
  <!--  Data presentation  -->
  <span> Current count ：{
   {state.counter}}</span>
 <button @click="increat"></button>
</div>
</template>
<script>
// 1.vue3  Provided reactive API   Be responsive 
import {reactive} from 'vue'
export default {
  props:{
    message:{
      type:String,
      required:true
    }
  },
  setup(){
    //2. Now use the responsive data reactive  Make a package 
    const state=reactive({
      counter:100;
    })
    //3. stay setup  It defines a local function 
    const increat = ()=>{
     state.counter++;
     console.log(state.counter);
    }
    //  Returned data 
    return {
    state,
    increat    //2. Return this function 
    }
  }
}
</script>

（2）ref API

reative API Yes The types passed in are limited , It requires that our incoming must be An object or array type ;

If we pass in a Basic data type （String、Number、Boolean） There will be a warning ;

This is the time Vue3 It provides us with another API:ref API

• ref   Will return a mutable responsive object , This object maintains its internal values as a responsive reference , This is it. ref The source of the name
• Its internal value is in ref Of value Maintained in the property ;

Here are two things to note ：

stay Template Introduction ref The value of , Vue Meeting Automatically help us unpack , So we There is no need to pass in the template ref.value The way To use

• <template>
  <div id="app">
    <!--  When we're in template  Used in template ref object , He will automatically unpack , -->
    <span> Current count ：{
       {counter}}</span>
   <button @click="increat"></button>
  
  </div>
  </template>
  <script>
  // 1.vue3  Provided reactive API   Be responsive 
  import {ref} from 'vue'
  export default {
    props:{
      message:{
        type:String,
        required:true
      }
    },
    setup(){
      //counter  To become a ref A responsive reference to 
      let counter=ref(100);
      //3. stay setup  It defines a local function 
      const increat = ()=>{
       counter.value++;
       console.log(counter);
      }
      //  Returned data 
      return {
      counter,
      increat    //2. Return this function 
      }
    }
  }
  </script>