refactor: change primitive ref to shallowRef

vueuse · antfu · Feb 15, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 14, 2025
commit c222bc4e9b61e325db3373d8c462ac72369a01d1
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,6 +1,7 @@
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import antfu from '@antfu/eslint-config'
+import { createAutoInsert } from 'eslint-plugin-unimport'

 const dir = fileURLToPath(new URL('.', import.meta.url))
 const restricted = [
@@ -122,4 +123,12 @@ export default antfu(
      'no-restricted-imports': 'off',
    },
  },
+  createAutoInsert({
+    imports: [
+      {
+        from: 'vue',
+        name: 'shallowRef',
+      },
+    ],
+  }),
 )
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
    "esbuild-register": "catalog:",
    "eslint": "catalog:",
    "eslint-plugin-format": "catalog:",
+    "eslint-plugin-unimport": "^0.1.2",
    "export-size": "catalog:",
    "fake-indexeddb": "catalog:",
    "firebase": "catalog:",

diff --git a/packages/.test/mount.ts b/packages/.test/mount.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue'
-import { createApp, defineComponent, h, provide, ref } from 'vue'
+import { createApp, defineComponent, h, provide, shallowRef } from 'vue'

 type InstanceType<V> = V extends { new (...arg: any[]): infer X } ? X : never
 type VM<V> = InstanceType<V> & { unmount: () => void }
@@ -38,7 +38,7 @@ export function useInjectedSetup<V>(setup: () => V) {
  const Provider = defineComponent({
    components: Comp,
    setup() {
-      provide(Key, ref(1))
+      provide(Key, shallowRef(1))
    },
    render() {
      return h('div', [])

diff --git a/packages/core/computedAsync/index.test.ts b/packages/core/computedAsync/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { describe, expect, expectTypeOf, it, vi } from 'vitest'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, shallowRef } from 'vue'
 import { asyncComputed, computedAsync } from './index'

 describe('computed', () => {
@@ -84,7 +84,7 @@ describe('computedAsync', () => {
  })

  it('re-computes when dependency changes', async () => {
-    const counter = ref(1)
+    const counter = shallowRef(1)
    const double = computedAsync(() => {
      const result = counter.value * 2
      return Promise.resolve(result)
@@ -106,10 +106,10 @@ describe('computedAsync', () => {
  })

  it('uses last result', async () => {
-    const evaluating = ref(false)
+    const evaluating = shallowRef(false)
    const resolutions: Array<() => void> = []

-    const counter = ref(1)
+    const counter = shallowRef(1)
    const double = computedAsync(() => {
      const result = counter.value * 2
      return new Promise(resolve => (resolutions.push(() => resolve(result))))
@@ -162,7 +162,7 @@ describe('computedAsync', () => {

  it('evaluating works', async () => {
    vi.useFakeTimers()
-    const evaluating = ref(false)
+    const evaluating = shallowRef(false)

    const data = computedAsync(
      () => new Promise(resolve => setTimeout(() => resolve('data'), 0)),
@@ -181,7 +181,7 @@ describe('computedAsync', () => {
  })

  it('triggers', async () => {
-    const counter = ref(1)
+    const counter = shallowRef(1)
    const double = computedAsync(() => {
      const result = counter.value * 2
      return Promise.resolve(result)
@@ -211,9 +211,9 @@ describe('computedAsync', () => {
  it('cancel is called', async () => {
    vi.useFakeTimers()
    const onCancel = vi.fn()
-    const evaluating = ref(false)
+    const evaluating = shallowRef(false)

-    const data = ref('initial')
+    const data = shallowRef('initial')
    const uppercase = computedAsync((cancel) => {
      cancel(onCancel)

@@ -246,7 +246,7 @@ describe('computedAsync', () => {
  it('cancel is called for lazy', async () => {
    const onCancel = vi.fn()

-    const data = ref('initial')
+    const data = shallowRef('initial')
    const uppercase = computedAsync((cancel) => {
      cancel(() => onCancel())


diff --git a/packages/core/computedInject/index.test.ts b/packages/core/computedInject/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { Key, useInjectedSetup } from '../../.test'
 import { computedInject } from './index'

@@ -17,7 +17,7 @@ describe('computedInject', () => {
      const anotherComputedNum = computedInject(Key, (source) => {
        if (source)
          return source.value + 10
-      }, ref(10))
+      }, shallowRef(10))

      expect(computedNum.value).toBe(2)
      expect(anotherComputedNum.value).toBe(11)

diff --git a/packages/core/onClickOutside/demo.vue b/packages/core/onClickOutside/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { OnClickOutsideHandler } from '@vueuse/core'
 import { onClickOutside } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { vOnClickOutside } from './directive'

-const modal = ref(false)
+const modal = shallowRef(false)
 const modalRef = ref(null)

 onClickOutside(
@@ -15,7 +15,7 @@ onClickOutside(
  },
 )

-const dropdown = ref(false)
+const dropdown = shallowRef(false)
 const dropdownHandler: OnClickOutsideHandler = (event) => {
  console.log(event)
  dropdown.value = false

diff --git a/packages/core/onElementRemoval/demo.vue b/packages/core/onElementRemoval/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { onElementRemoval } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'

 // demo1: recreate new element
-const demo1Ref = ref<HTMLElement | null>(null)
-const demo1State = ref(true)
-const demo1Count = ref(0)
+const demo1Ref = shallowRef<HTMLElement | null>(null)
+const demo1State = shallowRef(true)
+const demo1Count = shallowRef(0)

 function demo1BtnOnClick() {
  demo1State.value = !demo1State.value
@@ -14,10 +14,10 @@ function demo1BtnOnClick() {
 onElementRemoval(demo1Ref, () => demo1Count.value++)

 // demo2: reuse same element
-const demo2ParentRef = ref<HTMLElement | null>(null)
-const demo2Ref = ref<HTMLElement | null>(null)
-const demo2State = ref(true)
-const demo2Count = ref(0)
+const demo2ParentRef = shallowRef<HTMLElement | null>(null)
+const demo2Ref = shallowRef<HTMLElement | null>(null)
+const demo2State = shallowRef(true)
+const demo2Count = shallowRef(0)

 function demo2BtnOnClick() {
  demo2State.value = !demo2State.value

diff --git a/packages/core/onKeyStroke/demo.vue b/packages/core/onKeyStroke/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'

-const translateX = ref(0)
-const translateY = ref(0)
+const translateX = shallowRef(0)
+const translateY = shallowRef(0)

 onKeyStroke(['w', 'W', 'ArrowUp'], (e) => {
  if (e.key === 'ArrowUp') {

diff --git a/packages/core/onLongPress/demo.vue b/packages/core/onLongPress/demo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { onLongPress } from './'

-const htmlRef = ref<HTMLElement | null>(null)
-const htmlRefOptions = ref<HTMLElement | null>(null)
-const htmlRefOnMouseUp = ref<HTMLElement | null>(null)
+const htmlRef = shallowRef<HTMLElement | null>(null)
+const htmlRefOptions = shallowRef<HTMLElement | null>(null)
+const htmlRefOnMouseUp = shallowRef<HTMLElement | null>(null)

-const longPressed = ref(false)
-const clicked = ref(false)
+const longPressed = shallowRef(false)
+const clicked = shallowRef(false)

 function onLongPressCallback(e: PointerEvent) {
  longPressed.value = true

diff --git a/packages/core/onStartTyping/demo.vue b/packages/core/onStartTyping/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onStartTyping } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'

-const input = ref<HTMLInputElement | null>(null)
+const input = shallowRef<HTMLInputElement | null>(null)

 onStartTyping(() => {
  if (input.value !== document.activeElement)

diff --git a/packages/core/templateRef/index.test.ts b/packages/core/templateRef/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, nextTick, ref } from 'vue'
+import { defineComponent, h, nextTick, shallowRef } from 'vue'
 import { mount } from '../../.test'
 import { templateRef } from './index'

@@ -27,7 +27,7 @@ describe('templateRef', () => {
  it('string ref update', async () => {
    const vm = mount(defineComponent({
      setup() {
-        const refKey = ref('foo')
+        const refKey = shallowRef('foo')
        const fooEl = templateRef<HTMLElement | null>('foo', null)
        const barEl = templateRef<HTMLElement | null>('bar', null)
        return {
@@ -54,7 +54,7 @@ describe('templateRef', () => {
  it('string ref unmount', async () => {
    const vm = mount(defineComponent({
      setup() {
-        const toggle = ref(true)
+        const toggle = shallowRef(true)
        const targetEl = templateRef<HTMLElement | null>('target', null)
        return {
          toggle,

diff --git a/packages/core/useAsyncState/index.ts b/packages/core/useAsyncState/index.ts
@@ -93,8 +93,8 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
    throwError,
  } = options ?? {}
  const state = shallow ? shallowRef(initialState) : ref(initialState)
-  const isReady = ref(false)
-  const isLoading = ref(false)
+  const isReady = shallowRef(false)
+  const isLoading = shallowRef(false)
  const error = shallowRef<unknown | undefined>(undefined)

  async function execute(delay = 0, ...args: any[]) {

diff --git a/packages/core/useBase64/demo.vue b/packages/core/useBase64/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { useBase64 } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'

-const text = ref('')
+const text = shallowRef('')
 const file = ref() as Ref<File>
 const image = ref() as Ref<HTMLImageElement>


diff --git a/packages/core/useBase64/index.ts b/packages/core/useBase64/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { isClient } from '@vueuse/shared'
-import { isRef, ref, toValue, watch } from 'vue'
+import { isRef, ref, shallowRef, toValue, watch } from 'vue'
 import { getDefaultSerialization } from './serialization'

 export interface UseBase64Options {
@@ -47,7 +47,7 @@ export function useBase64(
  target: any,
  options?: any,
 ) {
-  const base64 = ref('')
+  const base64 = shallowRef('')
  const promise = ref() as Ref<Promise<string>>

  function execute() {

diff --git a/packages/core/useBattery/index.ts b/packages/core/useBattery/index.ts
@@ -1,7 +1,7 @@
 /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */

 import type { ConfigurableNavigator } from '../_configurable'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -28,10 +28,10 @@ export function useBattery(options: ConfigurableNavigator = {}) {

  const isSupported = useSupported(() => navigator && 'getBattery' in navigator && typeof navigator.getBattery === 'function')

-  const charging = ref(false)
-  const chargingTime = ref(0)
-  const dischargingTime = ref(0)
-  const level = ref(1)
+  const charging = shallowRef(false)
+  const chargingTime = shallowRef(0)
+  const dischargingTime = shallowRef(0)
+  const level = shallowRef(1)

  let battery: BatteryManager | null


diff --git a/packages/core/useBreakpoints/index.ts b/packages/core/useBreakpoints/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { increaseWithUnit, pxValue, tryOnMounted } from '@vueuse/shared'
-import { computed, ref, toValue } from 'vue'
+import { computed, shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useMediaQuery } from '../useMediaQuery'
 import { useSSRWidth } from '../useSSRWidth'
@@ -47,7 +47,7 @@ export function useBreakpoints<K extends string>(
  const { window = defaultWindow, strategy = 'min-width', ssrWidth = useSSRWidth() } = options

  const ssrSupport = typeof ssrWidth === 'number'
-  const mounted = ssrSupport ? ref(false) : { value: true }
+  const mounted = ssrSupport ? shallowRef(false) : { value: true }
  if (ssrSupport) {
    tryOnMounted(() => mounted.value = !!window)
  }

diff --git a/packages/core/useBroadcastChannel/demo.vue b/packages/core/useBroadcastChannel/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useBroadcastChannel } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'

 const {
  isSupported,
@@ -9,7 +9,7 @@ const {
  error,
 } = useBroadcastChannel({ name: 'vueuse-demo-channel' })

-const message = ref('')
+const message = shallowRef('')

 watch(data, () => {
  if (data.value)

diff --git a/packages/core/useBroadcastChannel/index.ts b/packages/core/useBroadcastChannel/index.ts
@@ -28,7 +28,7 @@ export function useBroadcastChannel<D, P>(options: UseBroadcastChannelOptions):
  } = options

  const isSupported = useSupported(() => window && 'BroadcastChannel' in window)
-  const isClosed = ref(false)
+  const isClosed = shallowRef(false)

  const channel = ref<BroadcastChannel | undefined>()
  const data = ref()

diff --git a/packages/core/useCached/index.test.ts b/packages/core/useCached/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { nextTwoTick } from '../../.test'
 import { useCached } from './index'

@@ -20,7 +20,7 @@ describe('useCached', () => {
  })

  it('should work with default comparator', async () => {
-    const booleanRef = ref(true)
+    const booleanRef = shallowRef(true)

    const cachedBooleanRef = useCached(booleanRef)
    await nextTwoTick()

diff --git a/packages/core/useClipboard/demo.vue b/packages/core/useClipboard/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useClipboard, usePermission } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'

-const input = ref('')
+const input = shallowRef('')

 const { text, isSupported, copy } = useClipboard()
 const permissionRead = usePermission('clipboard-read')