refactor: use utils proxy insteads of Object.defineProperty (#743)

Co-authored-by: webfansplz <>

Author: webfansplz

src/apis/inject.ts

@@ -1,5 +1,5 @@
 import { ComponentInstance } from '../component'
-import { hasOwn, warn, currentVMInFn, isFunction } from '../utils'
+import { hasOwn, warn, currentVMInFn, isFunction, proxy } from '../utils'
 import { getCurrentInstance } from '../runtimeContext'
 
 const NOT_FOUND = {}
@@ -28,9 +28,9 @@ export function provide<T>(key: InjectionKey<T> | string, value: T): void {
 
   if (!vm._provided) {
     const provideCache = {}
-    Object.defineProperty(vm, '_provided', {
+    proxy(vm, '_provided', {
       get: () => provideCache,
-      set: (v) => Object.assign(provideCache, v),
+      set: (v: any) => Object.assign(provideCache, v),
     })
   }
 

src/reactivity/reactive.ts

@@ -8,6 +8,7 @@ import {
   hasOwn,
   noopFn,
   isObject,
+  proxy,
 } from '../utils'
 import { isComponentInstance, defineComponentInstance } from '../utils/helper'
 import { RefKey } from '../utils/symbols'
@@ -80,9 +81,7 @@ export function defineAccessControl(target: AnyObject, key: any, val?: any) {
   }
 
   setupAccessControl(val)
-  Object.defineProperty(target, key, {
-    enumerable: true,
-    configurable: true,
+  proxy(target, key, {
     get: function getterHandler() {
       const value = getter ? getter.call(target) : val
       // if the key is equal to RefKey, skip the unwrap logic
@@ -92,7 +91,7 @@ export function defineAccessControl(target: AnyObject, key: any, val?: any) {
         return value
       }
     },
-    set: function setterHandler(newVal) {
+    set: function setterHandler(newVal: any) {
       if (getter && !setter) return
 
       const value = getter ? getter.call(target) : val
@@ -206,15 +205,13 @@ export function shallowReactive(obj: any): any {
       setter = property.set
     }
 
-    Object.defineProperty(observed, key, {
-      enumerable: true,
-      configurable: true,
+    proxy(observed, key, {
       get: function getterHandler() {
         const value = getter ? getter.call(obj) : val
         ob.dep?.depend()
         return value
       },
-      set: function setterHandler(newVal) {
+      set: function setterHandler(newVal: any) {
         if (getter && !setter) return
         if (setter) {
           setter.call(obj, newVal)

src/reactivity/readonly.ts

@@ -1,5 +1,5 @@
 import { reactive, Ref, UnwrapRef } from '.'
-import { isArray, isPlainObject, isObject, warn } from '../utils'
+import { isArray, isPlainObject, isObject, warn, proxy } from '../utils'
 import { readonlySet } from '../utils/sets'
 import { isReactive, observe } from './reactive'
 import { isRef, RefImpl } from './ref'
@@ -82,15 +82,13 @@ export function shallowReadonly(obj: any): any {
       getter = property.get
     }
 
-    Object.defineProperty(readonlyObj, key, {
-      enumerable: true,
-      configurable: true,
+    proxy(readonlyObj, key, {
       get: function getterHandler() {
         const value = getter ? getter.call(obj) : val
         ob.dep.depend()
         return value
       },
-      set(v) {
+      set(v: any) {
         if (__DEV__) {
           warn(`Set operation on key "${key}" failed: target is readonly.`)
         }