Procházet zdrojové kódy

fix hydration bugs

Evan You před 10 roky
rodič
revize
a347820518
3 změnil soubory, kde provedl 20 přidání a 11 odebrání
  1. 2 8
      src/core/instance/render.js
  2. 3 3
      src/core/vdom/patch.js
  3. 15 0
      src/shared/util.js

+ 2 - 8
src/core/instance/render.js

@@ -1,6 +1,6 @@
 import createElement from '../vdom/create-element'
 import { flatten } from '../vdom/helpers'
-import { bind, isArray, isObject } from '../util/index'
+import { bind, isArray, isObject, renderString } from 'shared/util'
 
 export const renderState = {
   activeInstance: null
@@ -40,13 +40,7 @@ export function renderMixin (Vue) {
   Vue.prototype.__h__ = createElement
 
   // toString for mustaches
-  Vue.prototype.__toString__ = function (val) {
-    return val == null
-      ? ''
-      : typeof val === 'object'
-        ? JSON.stringify(val, null, 2)
-        : val
-  }
+  Vue.prototype.__toString__ = renderString
 
   // render v-for
   Vue.prototype.__renderList__ = function (val, render) {

+ 3 - 3
src/core/vdom/patch.js

@@ -5,7 +5,7 @@
  */
 
 import VNode from './vnode'
-import { isPrimitive, warn } from '../util/index'
+import { isPrimitive, renderString, warn } from '../util/index'
 
 const emptyNode = VNode('', {}, [])
 const hooks = ['create', 'update', 'remove', 'destroy']
@@ -324,7 +324,7 @@ export function createPatchFunction (backend) {
 
   function assertNodeMatch (node, vnode) {
     if (vnode.tag) {
-      if (vnode.tag.indexOf('vue-component' === 0)) {
+      if (vnode.tag.indexOf('vue-component') === 0) {
         return true
       } else {
         return vnode.tag === node.tagName.toLowerCase() && (
@@ -334,7 +334,7 @@ export function createPatchFunction (backend) {
         )
       }
     } else {
-      return vnode.text === node.textContent
+      return renderString(vnode.text) === node.data
     }
   }
 

+ 15 - 0
src/shared/util.js

@@ -1,3 +1,18 @@
+/**
+ * Convert a value to a string that is actually rendered.
+ *
+ * @param {*} val
+ * @return {String}
+ */
+
+export function renderString (val) {
+  return val == null
+    ? ''
+    : typeof val === 'object'
+      ? JSON.stringify(val, null, 2)
+      : String(val)
+}
+
 /**
  * Make a map and return a function for checking if a key
  * is in that map.