adjust hydration strategy (fix #4560)

Author: yyx990803

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)
     }
   }
 

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 => {