fix: computed properties should not be cached during SSR

ref: vuejs/vuex#877
vuejs · Sep 1, 2017 · 06741f3 · 06741f3
1 parent c371fbd
commit 06741f3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/src/core/instance/state.js b/src/core/instance/state.js
@@ -23,6 +23,7 @@ import {
   nativeWatch,
   validateProp,
   isPlainObject,
+  isServerRendering,
   isReservedAttribute
 } from '../util/index'
 
@@ -169,6 +170,8 @@ const computedWatcherOptions = { lazy: true }
 function initComputed (vm: Component, computed: Object) {
   process.env.NODE_ENV !== 'production' && checkOptionType(vm, 'computed')
   const watchers = vm._computedWatchers = Object.create(null)
+  // computed properties are just getters during SSR
+  const isSSR = isServerRendering()
 
   for (const key in computed) {
     const userDef = computed[key]
@@ -179,8 +182,16 @@ function initComputed (vm: Component, computed: Object) {
         vm
       )
     }
-    // create internal watcher for the computed property.
-    watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)
+
+    if (!isSSR) {
+      // create internal watcher for the computed property.
+      watchers[key] = new Watcher(
+        vm,
+        getter || noop,
+        noop,
+        computedWatcherOptions
+      )
+    }
 
     // component-defined computed properties are already defined on the
     // component prototype. We only need to define computed properties defined
@@ -197,13 +208,20 @@ function initComputed (vm: Component, computed: Object) {
   }
 }
 
-export function defineComputed (target: any, key: string, userDef: Object | Function) {
+export function defineComputed (
+  target: any,
+  key: string,
+  userDef: Object | Function
+) {
+  const shouldCache = !isServerRendering()
   if (typeof userDef === 'function') {
-    sharedPropertyDefinition.get = createComputedGetter(key)
+    sharedPropertyDefinition.get = shouldCache
+      ? createComputedGetter(key)
+      : userDef
     sharedPropertyDefinition.set = noop
   } else {
     sharedPropertyDefinition.get = userDef.get
-      ? userDef.cache !== false
+      ? shouldCache && userDef.cache !== false
         ? createComputedGetter(key)
         : userDef.get
       : noop

diff --git a/test/ssr/ssr-string.spec.js b/test/ssr/ssr-string.spec.js
@@ -909,13 +909,30 @@ describe('SSR: renderToString', () => {
   })
 
   it('should escape static strings', done => {
-    renderVmWithOptions(({
+    renderVmWithOptions({
       template: `<div>&lt;foo&gt;</div>`
-    }), res => {
+    }, res => {
       expect(res).toBe(`<div data-server-rendered="true">&lt;foo&gt;</div>`)
       done()
     })
   })
+
+  it('should not cache computed properties', done => {
+    renderVmWithOptions({
+      template: `<div>{{ foo }}</div>`,
+      data: () => ({ bar: 1 }),
+      computed: {
+        foo () { return this.bar + 1 }
+      },
+      created () {
+        this.foo // access
+        this.bar++ // trigger change
+      }
+    }, res => {
+      expect(res).toBe(`<div data-server-rendered="true">3</div>`)
+      done()
+    })
+  })
 })
 
 function renderVmWithOptions (options, cb) {