remove use of reactivity transform

Author: yyx990803

.vitepress/config.ts

@@ -687,9 +687,5 @@ export default defineConfigWithTheme<ThemeConfig>({
     json: {
       stringify: true
     }
-  },
-
-  vue: {
-    reactivityTransform: true
   }
 })

.vitepress/theme/components/Banner.vue

@@ -5,13 +5,15 @@
  * 2. uncomment and update BANNER_ID in ../../inlined-scripts/restorePreferences.ts
  * 3. update --vt-banner-height if necessary
  */
+import { ref } from 'vue'
+
+const open = ref(true)
 
-let open = $ref(true)
 /**
  * Call this if the banner is dismissible
  */
 function dismiss() {
-  open = false
+  open.value = false
   document.documentElement.classList.add('banner-dismissed')
   localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
 }

.vitepress/theme/components/PreferenceSwitch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VTSwitch, VTIconChevronDown } from '@vue/theme'
 import { useRoute } from 'vitepress'
-import { inject, Ref } from 'vue'
+import { ref, computed, inject, Ref } from 'vue'
 import {
   preferCompositionKey,
   preferComposition,
@@ -10,15 +10,15 @@ import {
 } from './preferences'
 
 const route = useRoute()
-const show = $computed(() =>
+const show = computed(() =>
   /^\/(guide|tutorial|examples|style-guide)\//.test(route.path)
 )
-const showSFC = $computed(() => !/^\/guide|style-guide/.test(route.path))
+const showSFC = computed(() => !/^\/guide|style-guide/.test(route.path))
 
-let isOpen = $ref(true)
+let isOpen = ref(true)
 
 const toggleOpen = () => {
-  isOpen = !isOpen
+  isOpen.value = !isOpen.value
 }
 
 const removeOutline = (e: Event) => {

.vitepress/theme/components/SponsorsGroup.vue

@@ -1,29 +1,34 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { SponsorData, data, base, load } from './sponsors'
 
 type Placement = 'aside' | 'page' | 'landing'
 
-const { tier, placement = 'aside' } = defineProps<{
-  tier: keyof SponsorData
-  placement?: Placement
-}>()
+const props = withDefaults(
+  defineProps<{
+    tier: keyof SponsorData
+    placement?: Placement
+  }>(),
+  {
+    placement: 'aside'
+  }
+)
 
-let container = $ref<HTMLElement>()
-let visible = $ref(false)
+const container = ref<HTMLElement>()
+const visible = ref(false)
 
 onMounted(async () => {
   // only render when entering view
   const observer = new IntersectionObserver(
     (entries) => {
       if (entries[0].isIntersecting) {
-        visible = true
+        visible.value = true
         observer.disconnect()
       }
     },
     { rootMargin: '0px 0px 300px 0px' }
   )
-  observer.observe(container!)
+  observer.observe(container.value!)
   onUnmounted(() => observer.disconnect())
 
   // load data
@@ -38,7 +43,7 @@ const eventMap: Record<Placement, string> = {
 }
 
 function track(interest?: boolean) {
-  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[placement], 0)
+  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[props.placement], 0)
 }
 </script>
 

.vitepress/theme/components/VueJobs.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
+import { ref } from 'vue'
+
 // shared data across instances so we load only once
 const base = 'https://app.vuejobs.com/feed/vuejs/docs?format=json'
 
-let items = $ref<Jobs[]>([])
+const items = ref<Jobs[]>([])
 
 type Jobs = {
   organization: Organization
@@ -21,19 +23,19 @@ type Organization = {
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
 
-let vuejobs = $ref<HTMLElement>()
-
 const openings = computed(() =>
-  items.sort(() => 0.5 - Math.random()).slice(0, 2)
+  items.value.sort(() => 0.5 - Math.random()).slice(0, 2)
 )
 
 onMounted(async () => {
-  if (!items.length) items = (await (await fetch(`${base}`)).json()).data
+  if (!items.value.length) {
+    items.value = (await (await fetch(`${base}`)).json()).data
+  }
 })
 </script>
 
 <template>
-  <div class="vuejobs-wrapper" ref="vuejobs">
+  <div class="vuejobs-wrapper">
     <div class="vj-container">
       <a
         class="vj-item"
@@ -45,15 +47,17 @@ onMounted(async () => {
         <div class="vj-company-logo">
           <img
             :src="job.organization.avatar"
-            :alt="`Logo for ${job.organization.name}`" />
+            :alt="`Logo for ${job.organization.name}`"
+          />
         </div>
         <div
           style="
             overflow: hidden;
             display: flex;
             flex-direction: column;
             justify-content: center;
-          ">
+          "
+        >
           <div class="vj-job-title">{{ job.title }}</div>
           <div class="vj-job-info">
             {{ job.organization.name }} <span>· </span>

.vitepress/theme/components/VueMasteryModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const VIDEO_SOURCE = 'https://player.vimeo.com/video/647441538?autoplay=1'
-let showWhyVue: boolean = $ref(false)
+const showWhyVue = ref(false)
 
 watch(
   () => showWhyVue,

env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="vitepress/client" />
-/// <reference types="vue/macros-global" />
 
 declare module '@vue/theme/config' {
   import { UserConfig } from 'vitepress'

src/about/releases.md

@@ -3,13 +3,13 @@ outline: deep
 ---
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
-let version = $ref()
+const version = ref()
 
 onMounted(async () => {
   const res = await fetch('https://api.github.com/repos/vuejs/core/releases?per_page=1')
-  version = (await res.json())[0].name
+  version.value = (await res.json())[0].name
 })
 </script>
 

src/guide/built-ins/keep-alive-demos/CompA.vue

@@ -1,5 +1,6 @@
 <script setup>
-let count = $ref(0)
+import { ref } from 'vue'
+const count = ref(0)
 </script>
 
 <template>

src/guide/built-ins/keep-alive-demos/CompB.vue

@@ -1,5 +1,6 @@
 <script setup>
-let msg = $ref('')
+import { ref } from 'vue'
+const msg = ref('')
 </script>
 
 <template>