diff --git a/packages/shared/extendRef/index.md b/packages/shared/extendRef/index.md index 713314da0b6..8b55442e076 100644 --- a/packages/shared/extendRef/index.md +++ b/packages/shared/extendRef/index.md @@ -8,7 +8,7 @@ Add extra attributes to Ref. ## Usage -> This function is **NOT compatible with Vue 2**. +> This function is **NOT compatible with Vue 2.6 or below**. > Please note the extra attribute will not be accessible in Vue's template. diff --git a/packages/shared/extendRef/index.ts b/packages/shared/extendRef/index.ts index ec4863da544..dba90e8ef88 100644 --- a/packages/shared/extendRef/index.ts +++ b/packages/shared/extendRef/index.ts @@ -1,6 +1,6 @@ import type { Ref, ShallowUnwrapRef } from 'vue-demi' import { isRef } from 'vue-demi' -import { __onlyVue3 } from '../utils/compatibility' +import { __onlyVue27Plus } from '../utils/compatibility' export interface ExtendRefOptions { /** @@ -29,7 +29,7 @@ export function extendRef, Extend extends object, Options ext // implementation export function extendRef, Extend extends object>(ref: R, extend: Extend, { enumerable = false, unwrap = true }: ExtendRefOptions = {}) { - __onlyVue3() + __onlyVue27Plus() for (const [key, value] of Object.entries(extend)) { if (key === 'value') diff --git a/packages/shared/utils/compatibility.ts b/packages/shared/utils/compatibility.ts index 5f7044d4093..5da10499c30 100644 --- a/packages/shared/utils/compatibility.ts +++ b/packages/shared/utils/compatibility.ts @@ -1,4 +1,4 @@ -import { isVue3 } from 'vue-demi' +import { isVue3, version } from 'vue-demi' export function __onlyVue3(name = 'this function') { if (isVue3) @@ -7,6 +7,13 @@ export function __onlyVue3(name = 'this function') { throw new Error(`[VueUse] ${name} is only works on Vue 3.`) } +export function __onlyVue27Plus(name = 'this function') { + if (isVue3 || version.startsWith('2.7.')) + return + + throw new Error(`[VueUse] ${name} is only works on Vue 2.7 or above.`) +} + export const directiveHooks = { mounted: (isVue3 ? 'mounted' : 'inserted') as 'mounted', updated: (isVue3 ? 'updated' : 'componentUpdated') as 'updated',