refactor: use more efficient useComputed() implementation

diff --git a/packages/observer/src/computed.ts b/packages/observer/src/computed.ts
index d63588d0e92b697017b3b072db2844512b971aa4..31033bbbe78f51d7748022b9e3811369340f5d55 100644 (file)
--- a/packages/observer/src/computed.ts
+++ b/packages/observer/src/computed.ts
@@ -1,12 +1,15 @@
 import { autorun } from './index'
 import { Autorun, activeAutorunStack } from './autorun'
 
-export interface ComputedGetter {
-  (): any
+export interface ComputedGetter<T = any> {
+  (): T
   runner: Autorun
 }
 
-export function computed(getter: Function, context?: any): ComputedGetter {
+export function computed<T, C = null>(
+  getter: (this: C, ctx: C) => T,
+  context?: C
+): ComputedGetter<T> {
   let dirty: boolean = true
   let value: any = undefined
   const runner = autorun(() => getter.call(context, context), {

diff --git a/packages/runtime-core/src/componentComputed.ts b/packages/runtime-core/src/componentComputed.ts
index 7e914a1c06b351a0343481fcc9c1bb434c8426ce..3ab80a67cc19f80f9acb839aff25f6ad9c619dd9 100644 (file)
--- a/packages/runtime-core/src/componentComputed.ts
+++ b/packages/runtime-core/src/componentComputed.ts
@@ -3,6 +3,8 @@ import { computed, stop, ComputedGetter } from '@vue/observer'
 import { ComponentInstance } from './component'
 import { ComponentComputedOptions } from './componentOptions'
 
+export type ComputedHandles = Record<string, ComputedGetter>
+
 export function initializeComputed(
   instance: ComponentInstance,
   computedOptions: ComponentComputedOptions | undefined
@@ -10,10 +12,7 @@ export function initializeComputed(
   if (!computedOptions) {
     return
   }
-  const handles: Record<
-    string,
-    ComputedGetter
-  > = (instance._computedGetters = {})
+  const handles: ComputedHandles = (instance._computedGetters = {})
   const proxy = instance.$proxy
   for (const key in computedOptions) {
     const option = computedOptions[key]

diff --git a/packages/runtime-core/src/componentProxy.ts b/packages/runtime-core/src/componentProxy.ts
index 8319a962dc1dbef9c7c3aac4f6e4c9ae4e5db90d..80bd36cb8024d4b15369f29101c859c8a1d007ea 100644 (file)
--- a/packages/runtime-core/src/componentProxy.ts
+++ b/packages/runtime-core/src/componentProxy.ts
@@ -43,7 +43,8 @@ const renderProxyHandlers = {
     } else if (key[0] !== '_') {
       if (__DEV__ && isRendering && !(key in target)) {
         warn(
-          `property "${key}" was accessed during render but does not exist on instance.`
+          `property "${key}" was accessed during render but does not exist ` +
+            `on instance.`
         )
       }
       const value = Reflect.get(target, key, receiver)

diff --git a/packages/runtime-core/src/experimental/hooks.ts b/packages/runtime-core/src/experimental/hooks.ts
index e2d67be4d186a8a4a641a7b41a609a75827f6bfc..b4948d3bdbadaf1283d8a6a8bea2a31b3a3826f5 100644 (file)
--- a/packages/runtime-core/src/experimental/hooks.ts
+++ b/packages/runtime-core/src/experimental/hooks.ts
@@ -1,7 +1,7 @@
 import { ComponentInstance, FunctionalComponent, Component } from '../component'
 import { mergeLifecycleHooks, Data, WatchOptions } from '../componentOptions'
 import { VNode, Slots } from '../vdom'
-import { observable, computed, stop, ComputedGetter } from '@vue/observer'
+import { observable, computed } from '@vue/observer'
 import { setupWatcher } from '../componentWatch'
 
 type RawEffect = () => (() => void) | void
@@ -191,14 +191,14 @@ export function useWatch<T>(
 }
 
 export function useComputed<T>(getter: () => T): T {
-  const computedRef = useRef()
-  useUnmounted(() => {
-    stop((computedRef.current as ComputedGetter).runner)
-  })
+  ensureCurrentInstance()
+  const id = `__hooksComputed${++callIndex}`
+  const instance = currentInstance as ComponentInstance
+  const handles = instance._computedGetters || (instance._computedGetters = {})
   if (isMounting) {
-    computedRef.current = computed(getter)
+    handles[id] = computed(getter)
   }
-  return (computedRef.current as ComputedGetter)()
+  return handles[id]()
 }
 
 export function withHooks(render: FunctionalComponent): new () => Component {