adjust hydration strategy (fix vuejs#4560)

yyx990803 · yyx990803 · commit 6b1755ae8c9f · 2016-12-27T17:27:20.000-05:00
diff --git a/src/core/vdom/patch.js b/src/core/vdom/patch.js
@@ -14,7 +14,7 @@
 
 import config from '../config'
 import VNode from './vnode'
-import { makeMap, isPrimitive, _toString, warn } from '../util/index'
+import { makeMap, isPrimitive, warn } from '../util/index'
 import { activeInstance } from '../instance/lifecycle'
 import { registerRef } from './modules/ref'
 
@@ -526,6 +526,8 @@ export function createPatchFunction (backend) {
           }
         }
       }
+    } else if (elm.data !== vnode.text) {
+      elm.data = vnode.text
     }
     return true
   }
@@ -537,7 +539,7 @@ export function createPatchFunction (backend) {
         vnode.tag.toLowerCase() === (node.tagName && node.tagName.toLowerCase())
       )
     } else {
-      return _toString(vnode.text) === node.data
+      return node.nodeType === (vnode.isComment ? 8 : 3)
     }
   }
 
diff --git a/test/unit/modules/vdom/patch/hydration.spec.js b/test/unit/modules/vdom/patch/hydration.spec.js
@@ -91,14 +91,15 @@ describe('vdom patch: hydration', () => {
   it('should hydrate components when server-rendered DOM tree is same as virtual DOM tree', done => {
     const dom = document.createElement('div')
     dom.setAttribute('server-rendered', 'true')
-    dom.innerHTML = '<span>foo</span><div class="b a"><span>foo qux</span></div>'
+    dom.innerHTML = '<span>foo</span><div class="b a"><span>foo qux</span></div><!---->'
     const originalNode1 = dom.children[0]
     const originalNode2 = dom.children[1]
 
     const vm = new Vue({
-      template: '<div><span>{{msg}}</span><test class="a" :msg="msg"></test></div>',
+      template: '<div><span>{{msg}}</span><test class="a" :msg="msg"></test><p v-if="ok"></p></div>',
       data: {
-        msg: 'foo'
+        msg: 'foo',
+        ok: false
       },
       components: {
         test: {
@@ -119,14 +120,34 @@ describe('vdom patch: hydration', () => {
     expect(vm.$el.children[1]).toBe(originalNode2)
     vm.msg = 'bar'
     waitForUpdate(() => {
-      expect(vm.$el.innerHTML).toBe('<span>bar</span><div class="b a"><span>bar qux</span></div>')
+      expect(vm.$el.innerHTML).toBe('<span>bar</span><div class="b a"><span>bar qux</span></div><!---->')
       vm.$children[0].a = 'ququx'
     }).then(() => {
-      expect(vm.$el.innerHTML).toBe('<span>bar</span><div class="b a"><span>bar ququx</span></div>')
+      expect(vm.$el.innerHTML).toBe('<span>bar</span><div class="b a"><span>bar ququx</span></div><!---->')
+      vm.ok = true
+    }).then(() => {
+      expect(vm.$el.innerHTML).toBe('<span>bar</span><div class="b a"><span>bar ququx</span></div><p></p>')
     }).then(done)
   })
 
   it('should warn failed hydration for non-matching DOM in child component', () => {
+    const dom = document.createElement('div')
+    dom.setAttribute('server-rendered', 'true')
+    dom.innerHTML = '<div><span></span></div>'
+
+    new Vue({
+      template: '<div><test></test></div>',
+      components: {
+        test: {
+          template: '<div><a></a></div>'
+        }
+      }
+    }).$mount(dom)
+
+    expect('not matching server-rendered content').toHaveBeenWarned()
+  })
+
+  it('should overwrite textNodes in the correct position but with mismatching text without warning', () => {
     const dom = document.createElement('div')
     dom.setAttribute('server-rendered', 'true')
     dom.innerHTML = '<div><span>foo</span></div>'
@@ -143,7 +164,8 @@ describe('vdom patch: hydration', () => {
       }
     }).$mount(dom)
 
-    expect('not matching server-rendered content').toHaveBeenWarned()
+    expect('not matching server-rendered content').not.toHaveBeenWarned()
+    expect(dom.querySelector('span').textContent).toBe('qux')
   })
 
   it('should pick up elements with no children and populate without warning', done => {

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`
`15`	`15`	`import config from '../config'`
`16`	`16`	`import VNode from './vnode'`
`17`		`-import { makeMap, isPrimitive, _toString, warn } from '../util/index'`
	`17`	`+import { makeMap, isPrimitive, warn } from '../util/index'`
`18`	`18`	`import { activeInstance } from '../instance/lifecycle'`
`19`	`19`	`import { registerRef } from './modules/ref'`
`20`	`20`
`@@ -526,6 +526,8 @@ export function createPatchFunction (backend) {`
`526`	`526`	`}`
`527`	`527`	`}`
`528`	`528`	`}`
	`529`	`+ } else if (elm.data !== vnode.text) {`
	`530`	`+ elm.data = vnode.text`
`529`	`531`	`}`
`530`	`532`	`return true`
`531`	`533`	`}`
`@@ -537,7 +539,7 @@ export function createPatchFunction (backend) {`
`537`	`539`	`vnode.tag.toLowerCase() === (node.tagName && node.tagName.toLowerCase())`
`538`	`540`	`)`
`539`	`541`	`} else {`
`540`		`- return _toString(vnode.text) === node.data`
	`542`	`+ return node.nodeType === (vnode.isComment ? 8 : 3)`
`541`	`543`	`}`
`542`	`544`	`}`
`543`	`545`