Skip to content
Permalink
Browse files
fix(ssr): only cache computed getters during render phase
fix #5300
  • Loading branch information
yyx990803 committed Jan 21, 2022
1 parent 25bc654 commit 2f91872e7b64fb5e497529a9ed21c76c602bad2c
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 9 deletions.
@@ -23,16 +23,18 @@ export interface WritableComputedOptions<T> {
set: ComputedSetter<T>
}

class ComputedRefImpl<T> {
export class ComputedRefImpl<T> {
public dep?: Dep = undefined

private _value!: T
private _dirty = true
public readonly effect: ReactiveEffect<T>

public readonly __v_isRef = true
public readonly [ReactiveFlags.IS_READONLY]: boolean

public _dirty = true
public _cacheable: boolean

constructor(
getter: ComputedGetter<T>,
private readonly _setter: ComputedSetter<T>,
@@ -45,15 +47,16 @@ class ComputedRefImpl<T> {
triggerRefValue(this)
}
})
this.effect.active = !isSSR
this.effect.computed = this
this.effect.active = this._cacheable = !isSSR
this[ReactiveFlags.IS_READONLY] = isReadonly
}

get value() {
// the computed ref may get wrapped by other proxies e.g. readonly() #3376
const self = toRaw(this)
trackRefValue(self)
if (self._dirty) {
if (self._dirty || !self._cacheable) {
self._dirty = false
self._value = self.effect.run()!
}
@@ -58,14 +58,14 @@ class DeferredComputedRefImpl<T> {
// value invalidation in case of sync access; normal effects are
// deferred to be triggered in scheduler.
for (const e of this.dep) {
if (e.computed) {
if (e.computed instanceof DeferredComputedRefImpl) {
e.scheduler!(true /* computedTrigger */)
}
}
}
this._dirty = true
})
this.effect.computed = true
this.effect.computed = this as any
}

private _get() {
@@ -9,6 +9,7 @@ import {
newTracked,
wasTracked
} from './dep'
import { ComputedRefImpl } from './computed'

// The main WeakMap that stores {target -> key -> dep} connections.
// Conceptually, it's easier to think of a dependency as a Dep class
@@ -54,9 +55,16 @@ export class ReactiveEffect<T = any> {
active = true
deps: Dep[] = []

// can be attached after creation
computed?: boolean
/**
* Can be attached after creation
* @internal
*/
computed?: ComputedRefImpl<T>
/**
* @internal
*/
allowRecurse?: boolean

onStop?: () => void
// dev only
onTrack?: (event: DebuggerEvent) => void
@@ -19,7 +19,8 @@ import {
LooseRequired,
UnionToIntersection
} from '@vue/shared'
import { computed, isRef, Ref } from '@vue/reactivity'
import { isRef, Ref } from '@vue/reactivity'
import { computed } from './apiComputed'
import {
watch,
WatchOptions,
@@ -0,0 +1,48 @@
import { createSSRApp, defineComponent, h, computed, reactive } from 'vue'
import { renderToString } from '../src/renderToString'

// #5208 reported memory leak of keeping computed alive during SSR
// so we made computed properties created during SSR non-reactive in
// https://github.com/vuejs/core/commit/f4f0966b33863ac0fca6a20cf9e8ddfbb311ae87
// However, the default caching leads to #5300 which is tested below.
// In Vue 2, computed properties are simple getters during SSR - this can be
// inefficient if an expensive computed is accessed multiple times during render,
// but because of potential mutations, we cannot cache it until we enter the
// render phase (where no mutations can happen anymore)
test('computed reactivity during SSR', async () => {
const store = {
// initial state could be hydrated
state: reactive({ items: null }) as any,

// pretend to fetch some data from an api
async fetchData() {
this.state.items = ['hello', 'world']
}
}

const getterSpy = jest.fn()

const App = defineComponent(async () => {
const msg = computed(() => {
getterSpy()
return store.state.items?.join(' ')
})

// If msg value is falsy then we are either in ssr context or on the client
// and the initial state was not modified/hydrated.
// In both cases we need to fetch data.
if (!msg.value) await store.fetchData()

expect(msg.value).toBe('hello world')
return () => h('div', null, msg.value + msg.value + msg.value)
})

const app = createSSRApp(App)

const html = await renderToString(app)
expect(html).toMatch('hello world')

// should only be called twice since access should be cached
// during the render phase
expect(getterSpy).toHaveBeenCalledTimes(2)
})
@@ -128,6 +128,12 @@ function renderComponentSubTree(
comp.ssrRender = ssrCompile(comp.template, instance)
}

// perf: enable caching of computed getters during render
// since there cannot be state mutations during render.
for (const e of instance.scope.effects) {
if (e.computed) e.computed._cacheable = true
}

const ssrRender = instance.ssrRender || comp.ssrRender
if (ssrRender) {
// optimized

0 comments on commit 2f91872

Please sign in to comment.