Detailed explanation of the API interpretation of Vue3's ref and reactive examples

// import { createVNode, h } from "vue"
export const HelloWorld = () => {
  // return h("h1", ["Hello world!!!"])
  return <h1>Hello world!!!</h1>
}

// import type only introduces type and will not executeimport type { RouteRecordRaw } from "vue-router";
//Route typetype MyRouteType = RouteRecordRaw & {
  key: string
}

import { createApp } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import App from './App'
import { MyRouteType } from './mytypes'
// rollup-context capability, webpack does not have// The framework is vite3// Get all .tsx【typescript + jsx】 files under /examplesconst examples = ("./examples/**/*.tsx")
// Install a vue-router@next// npm add vue-router@next
const routes: MyRouteType[] = []
const examplePromises = (examples)
  .map(x => examples[x])
  .map(f => f())
// All examplePromises are resolved(examplePromises)
  .then(list => {
    for (let module of list) {
      for (let key in module) {
        const Component = module[key]
        ({
          path: "/" + (),
          key,
          component: Component
        })
      }
    }
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })
    // Pass routes as the App property    const app = createApp(App, { routes })
    (router)
    ('#app')
  })

import { RouterLink, RouterView } from "vue-router"
import { MyRouteType } from "./mytypes"
import "./"
export default (props: {
  routes: MyRouteType[]
}) => {
  return <>
    <header><h2>Project practical examples</h2></header>
    <div class="body">
      <ul class="menu">
        {(x => {
          return <li key={}>
            <RouterLink to={}>{}</RouterLink>
          </li>
        })}
      </ul>
      <div class="content">
        <RouterView />
      </div>
    </div>
  </>
}

* {
  margin : 0;
}
html, body {
  height : 100%;
}
#app {
  height: 100%;
}
header {
  height : 60px;
  line-height: 60px;
  padding-left: 20px;
  width : 100%;
  background-color: black;
  color : white;
}
.body {
  display: flex;
  width : 100%;
  height : 100%;
}
.menu {
  padding-top : 20px;
  width : 200px;
  border-right:  1px solid #f2f3f4;
  min-height: 100%;
}
.menu li a{
  text-decoration: none;
  color : #2377de;
}
.menu li a:visited {
  text-decoration: none;
  color : #2377de;
}
.menu li {
  list-style: none;
}
.content {
  margin : 10px;
  position: relative;
}

import { defineComponent, PropType, Ref, ref } from "vue";
// Use responsive values ​​to create through defineComponent,// If you do not use the responsive value RefExample01 = ()= { return <div>2233</div> }// Without using defineComponent, there is no setup() to useexport const RefExample01 = defineComponent({
  setup() {
    // ref is a proxy, gets the value through .value    const count = ref(0)
    ('The setup function is executed only once')
    // Rendering function    return () =&gt; {
      ('render function executes every time')
      return (
        &lt;div&gt;
          &lt;button onClick={() =&gt; {
            ++
          }}&gt;+&lt;/button&gt;
          {}
        &lt;/div&gt;
      )
    }
  }
})
export const RefExample02 = defineComponent({
  setup() {
    // ref is a proxy, gets the value through .value    const count = ref(0)
    ('The setup function is executed only once')
    // Rendering function    return () =&gt; {
      ('render function executes every time')
      return (
        &lt;div&gt;
          &lt;button onClick={() =&gt; {
            ++
          }}&gt;+&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
})
export const RefExample03 = defineComponent({
  setup() {
    // ref is a proxy, gets the value through .value    const count = ref(0)
    ('The setup function is executed only once')
    // Rendering function    return () =&gt; {
      return (
        &lt;div&gt;
          &lt;button onClick={() =&gt; {
            ++
          }}&gt;+&lt;/button&gt;
          &lt;Count1 count={count} /&gt;
          &lt;Counter count={count} /&gt;
        &lt;/div&gt;
      )
    }
  }
})
const Counter = ({ count }: {
  count: Ref&lt;number&gt;
}) =&gt; {
  return &lt;div&gt;{}&lt;/div&gt;
}
const Count1 = defineComponent({
  props: { // Mapping attributes are required    count: {
      type: Object as PropType&lt;Ref&lt;number&gt;&gt;, // Give an alias type      required: true // Write this, vue can let you get the value in render    }
  },
  setup(props) {
    return (
      // You can get value by writing this way      // props: {
      //   count: Ref&lt;number&gt;
      // }
    ) =&gt; {
      return &lt;div&gt;{}&lt;/div&gt;
    }
  }
})

import {
  customRef,
  defineComponent,
  reactive,
  toRefs,
  unref,
  isRef,
} from "vue";
// /api/
export const ReactiveExample01 = defineComponent({
  setup() {
    const state = reactive({
      a: "123",
      b: 2
    })
    setTimeout(() => {
       = "456"
    }, 1000)
    setTimeout(() => {
       = 100
    }, 2000)
    return () => {
      return <div>
        <div>{}</div>
        <div>{}</div>
      </div>
    }
  }
})
function getState() {
  const state = reactive({
    a: "123",
    b: 2
  })
  return toRefs(state)
}
export const ReactiveExample02 = defineComponent({
  setup() {
    const { a, b } = getState()
    // const { a, b } = toRefs(state) // batch ref    setTimeout(() => {
      // = "456" // reactive usage       = "456" // Ref usage    }, 1000)
    setTimeout(() => {
      //  = 100
       = 100
    }, 2000)
    return () => {
      return <div>
        <div>{}</div>
        <div>{}</div>
      </div>
    }
  }
})
// Anti-shake customReffunction useDebouncedRef(value: string, delay = 200) {
  let timeout: number | undefined
  return customRef((track: () => void, trigger: () => void) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: any) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}
export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

const state = ({ count: 0 })
const Demo = {
    render(h) {
        return h('button', {
            on: { click: () => { ++ }}        
        }, `count is: ${}`)    
    }
}