Refer to video tutorial materials:
 Vue3 master a complete knowledge system from introduction to actual combat:http://www.notescloud.top/goods/detail/1189 
 WeChat share and pay special courses (official account applet) (cloud):http://www.notescloud.top/goods/detail/1198 
 Vue family bucket independently develops enterprise e-commerce system from zero (upgrade vue3.0 for free):http://www.notescloud.top/goods/detail/1191 
 Vue3.0 high level actual combat: develop high-quality music Web app:http://www.notescloud.top/goods/detail/1190 
 Go deep into Vue3+TypeScript technology stack - coderwhy new lesson:http://www.notescloud.top/goods/detail/1197

catalogue
1, Composite API
2, Responsive variable with ref
3, Variable with reactive response
4, computed calculated attribute
5, watch responsive change
6, props value transfer
7, emit callback
8, provide/inject

1, Composite API

By creating Vue components, we can extract the repeatable parts of the interface and its functions into reusable code segments. This alone can take our applications further in terms of maintainability and flexibility. However, our experience has proved that this alone may not be enough, especially when your application becomes very large - think of hundreds of components. When dealing with such a large application, sharing and reusing code becomes particularly important.
Organizing logic with component options (data, computed, methods, watch) works in most cases. However, as our components become larger, the list of logical concerns grows. This can make components difficult to read and understand, especially for those who did not write them in the first place. This fragmentation makes it difficult to understand and maintain complex components. The separation of options masks potential logical problems. In addition, when dealing with a single logical concern, we must constantly "jump" to the option block of related code.
It would be better if we could configure code related to the same logical concern. And that's what the composite API enables us to do.

<template>
 <h2>{{userName}}</h2>
</template>
<script>
export default {
  components: {},
  props: {
  },
  setup(props) {
    let userName = 'Star programming';
    return {userName} 
  }
}
</script>

2, Responsive variable with ref

ref accepts the parameter and returns it wrapped in an object with a value property that can then be used to access or change the value of a reactive variable.

<template>
 <h2>{{userName}}</h2>
 <input type="text" v-model="userName" />
</template>
<script>
import { ref } from 'vue'
export default {
  setup(props) {
    let userName = ref('Star programming');
    return {userName} 
  }
}
</script>

3, Variable with reactive response

reactive returns a responsive copy of the object. Responsive transformation is "deep" -- it affects all nested properties. Based on ES2015 Proxy In the implementation of, the returned proxy is not equal to the original object. It is recommended to use only responsive proxy to avoid relying on the original object.

<template>
 <h2>full name:{{userName}}</h2>
 <h2>Gender:{{sex}}</h2>
 <h2>occupation:{{job}}</h2>
</template>
<script>
import { reactive, toRefs} from 'vue'
export default {
  setup(props) {
    let user  = reactive({
        userName:'Star programming',
        sex:'male',
        job:'Front end development engineer'
    });
    return {
        ...toRefs(user)
    } 
  }
}
</script>

4, computed calculated attribute

computed uses the getter function and returns an invariant response for the value returned from the getter ref Object.
The computed function returns a read-only responsive reference to the output of the getter class callback passed as the first parameter of computed. In order to access the value of the newly created calculated variable, we need to use it like ref value property.

<template>
 <h2>{{tip}}</h2>
</template>
<script>
import { computed } from 'vue'
export default {
  setup(props) {
    let userName = 'Star programming';
    let tip = computed(()=>{
         return 'Welcome to pay attention' + userName + 'WeChat official account!' ;
     })
    return {
       tip
    } 
  }
}
</script>

5, watch responsive change

watch needs to listen to a specific data source and perform side effects in a separate callback function. By default, it is also lazy -- that is, callbacks are called only when the listening source changes.

<template>
  <h2>count:{{ count }}</h2>
  <button @click="random">random number</button>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });
    watch(
      () => state.count,
      (count, prevCount) => {
          console.log(prevCount);
      }
    );
    function random() {
      state["count"] = Math.round(Math.random()*10000) ;
    }
    return { ...toRefs(state), random };
  },
};
</script>

6, props value transfer

1. The parent component passes the userName to the child component DemoComponent through the userName attribute.

<template>
 <DemoComponent :userName='userName'></DemoComponent>
</template>
<script>
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup(props) {
    let userName = 'Star programming';
    return {
       userName
    } 
  }
}
</script>

2. The child component DemoComponent receives the userName parameter passed by the parent component.

<template>
 <h2>{{userName}}</h2>
</template>
<script>
export default {
  props: {
    userName: String
  },
  setup(props) {
    let userName = props.userName;
    return {
       userName
    } 
  }
}
</script>

7, emit callback

1. The parent component implements the callback function of the child component DemoComponent and displays the received tip parameter in the < H2 > tag.

<template>
<h2>{{userName}}</h2>
 <DemoComponent @callback='showTip'></DemoComponent>
</template>
<script>
import { ref } from 'vue'
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup(props,content) {
    let userName = ref('Star programming');
    function showTip(tip){
       userName.value = tip;
    }
    return {
       userName,
       callback
    } 
  }
}
</script>

2. The subcomponent DemoComponent passes through content Emit implements the callback callback.

<template>
 <button @click='done'>emit Callback</button>
</template>
<script>
export default {
  props: {
    userName: String
  },
  setup(props,content) {
    function done() {
      content.emit('callback','Welcome to WeChat official account for star programming!')
    }
    return {
        done
    } 
  }
}
</script>

8, provide/inject

provide/inject Both can only be in the current active instance setup() Called during.
1. When using provide in setup(), we first explicitly import the provide method from vue. This enables us to define each property when we call provide.
The provide function allows you to define property with two parameters:
Name of property (< string > type)
value of property

<template>
<h2>provide/inject</h2>
<DemoComponent></DemoComponent>
</template>
<script>
import { ref,provide } from 'vue'
import DemoComponent from '@src/components/DemoComponent.vue';
export default {
  components:{ DemoComponent },
  setup() {
    let userName = ref('Star programming');
    provide('userName', userName);
  }
}
</script>

2. When using inject in setup(), you also need to explicitly import it from vue. Once we do, we can call it to define how to expose it to our components.
The inject function has two parameters:
The name of the property to inject
A default value (optional)

<template>
  <h2>{{ userName }}</h2>
</template>
<script>
import { inject } from "vue";
export default {
  setup() {
    const userName = inject("userName", "Default name");
    return {
      userName,
    };
  },
};
</script>

3. provide/inject is more convenient to pass parameters than props and emit callbacks, and can pass parameters across components.