Detailed explanation of non-parent-child component value transfer in Vue3

The value transmission of non-parent-child components in vue2 is mainly through the event bus, creating a vue instance, and implementing the communication behavior between non-parent-child components by importing the instance in different components.
Vue3 provides **provide** and **inject** properties, which can realize communication between non-parent-child components;
Suppose there are three components: App.vue (parent), sub1 (child), sub2 (child of child):

<template>
  <div style="border: 1px solid pink">
    <h1>I am your father</h1>
    👇
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
	export default {
		name: "App",
    components:{
			sub1,
    },
    provide:{ // Define provide in the parent component to declare the value to be passed names:['peanut','javascriptKing']
    }
	}
</script>
<style scoped>
</style>

<template>
  <h2>I am a first-level child component</h2>
  👇
  <sub2/>
</template>
<script>
  import sub2 from "./sub2";
	export default {
		name: "sub1",
    components:{
			sub2,
    }
	}
</script>
<style scoped>
</style>

<template>
  <h3>I am the youngest, the grandson</h3>
  <div>I referenced the names array of the top-level component ===> {{names}}</div>
</template>
<script>
	export default {
		name: "sub2",
    // Accept a cross-level value in the child component through inject:['names'],
	}
</script>
<style scoped>
</style>

<template>
  <div style="border: 1px solid pink">
    <h1>I am your father</h1>
    👇
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
	export default {
		name: "App",
    data(){
			return {
				names:['peanut','javascriptKing']
      }
    },
    components:{
			sub1,
    },
    /*Writing this way will not get this. At this time, this only means that the scope this in the script is undefined*/
    /*provide:{
			this.names,
    }*/
  // Should be written like this provide(){
    	return {
    		names:this.names
      }
    }
	}
</script>
<style scoped>
</style>

<template>
  <div style="border: 1px solid pink">
    <h1>I am your father</h1>
    👇
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
  import { computed } from 'vue'
	export default {
		name: "App",
    data(){
			return {
				names:['peanut','javascriptKing']
      }
    },
    components:{
			sub1,
    },
    /*Writing this way will not get this. At this time, this only means that the scope this in the script is undefined*/
    /*provide:{
			this.names,
    }*/
  // Should be written like this provide(){
    	return {
    		names:computed(() =>{ this.names.length }) // Use the calculated property to return the variable so that names forms a dependency relationship with the names in data}
    },
    mounted() {
    	setInterval(()=>{
    		this.names.push('vue king!')
      },1000)
    }
	}
</script>
<style scoped>
</style>