fix(runtime-core): rework vnode hooks handling

- peroperly support directive on components (e.g. <foo v-show="x">)
- consistently invoke raw vnode hooks on component vnodes (fix #684)

packages/runtime-core/src/component.ts

@@ -113,6 +113,7 @@ export interface ComponentInternalInstance {
   data: Data
   props: Data
   attrs: Data
+  vnodeHooks: Data
   slots: Slots
   proxy: ComponentPublicInstance | null
   // alternative proxy used only for runtime-compiled render functions using
@@ -186,6 +187,7 @@ export function createComponentInstance(
     data: EMPTY_OBJ,
     props: EMPTY_OBJ,
     attrs: EMPTY_OBJ,
+    vnodeHooks: EMPTY_OBJ,
     slots: EMPTY_OBJ,
     refs: EMPTY_OBJ,
 

packages/runtime-core/src/componentProps.ts

@@ -11,7 +11,8 @@ import {
   hasOwn,
   toRawType,
   PatchFlags,
-  makeMap
+  makeMap,
+  isReservedProp
 } from '@vue/shared'
 import { warn } from './warning'
 import { Data, ComponentInternalInstance } from './component'
@@ -104,7 +105,8 @@ export function resolveProps(
 
   const { 0: options, 1: needCastKeys } = normalizePropsOptions(_options)!
   const props: Data = {}
-  let attrs: Data | undefined = void 0
+  let attrs: Data | undefined = undefined
+  let vnodeHooks: Data | undefined = undefined
 
   // update the instance propsProxy (passed to setup()) to trigger potential
   // changes
@@ -123,21 +125,28 @@ export function resolveProps(
 
   if (rawProps != null) {
     for (const key in rawProps) {
+      const value = rawProps[key]
       // key, ref are reserved and never passed down
-      if (key === 'key' || key === 'ref') continue
+      if (isReservedProp(key)) {
+        if (key !== 'key' && key !== 'ref') {
+          // vnode hooks.
+          ;(vnodeHooks || (vnodeHooks = {}))[key] = value
+        }
+        continue
+      }
       // prop option names are camelized during normalization, so to support
       // kebab -> camel conversion here we need to camelize the key.
       if (hasDeclaredProps) {
         const camelKey = camelize(key)
         if (hasOwn(options, camelKey)) {
-          setProp(camelKey, rawProps[key])
+          setProp(camelKey, value)
         } else {
           // Any non-declared props are put into a separate `attrs` object
           // for spreading. Make sure to preserve original key casing
-          ;(attrs || (attrs = {}))[key] = rawProps[key]
+          ;(attrs || (attrs = {}))[key] = value
         }
       } else {
-        setProp(key, rawProps[key])
+        setProp(key, value)
       }
     }
   }
@@ -206,6 +215,7 @@ export function resolveProps(
 
   instance.props = props
   instance.attrs = options ? attrs || EMPTY_OBJ : props
+  instance.vnodeHooks = vnodeHooks || EMPTY_OBJ
 }
 
 const normalizationMap = new WeakMap<

packages/runtime-core/src/componentRenderUtils.ts

@@ -46,6 +46,7 @@ export function renderComponentRoot(
     props,
     slots,
     attrs,
+    vnodeHooks,
     emit
   } = instance
 
@@ -92,14 +93,23 @@ export function renderComponentRoot(
       }
     }
 
+    // inherit vnode hooks
+    if (vnodeHooks !== EMPTY_OBJ) {
+      result = cloneVNode(result, vnodeHooks)
+    }
+    // inherit directives
+    if (vnode.dirs != null) {
+      if (__DEV__ && !isElementRoot(result)) {
+        warn(
+          `Runtime directive used on component with non-element root node. ` +
+            `The directives will not function as intended.`
+        )
+      }
+      result.dirs = vnode.dirs
+    }
     // inherit transition data
     if (vnode.transition != null) {
-      if (
-        __DEV__ &&
-        !(result.shapeFlag & ShapeFlags.COMPONENT) &&
-        !(result.shapeFlag & ShapeFlags.ELEMENT) &&
-        result.type !== Comment
-      ) {
+      if (__DEV__ && !isElementRoot(result)) {
         warn(
           `Component inside <Transition> renders non-element root node ` +
             `that cannot be animated.`
@@ -115,6 +125,14 @@ export function renderComponentRoot(
   return result
 }
 
+function isElementRoot(vnode: VNode) {
+  return (
+    vnode.shapeFlag & ShapeFlags.COMPONENT ||
+    vnode.shapeFlag & ShapeFlags.ELEMENT ||
+    vnode.type === Comment // potential v-if branch switch
+  )
+}
+
 export function shouldUpdateComponent(
   prevVNode: VNode,
   nextVNode: VNode,
@@ -137,6 +155,11 @@ export function shouldUpdateComponent(
     return true
   }
 
+  // force child update on runtime directive usage on component vnode.
+  if (nextVNode.dirs != null) {
+    return true
+  }
+
   if (patchFlag > 0) {
     if (patchFlag & PatchFlags.DYNAMIC_SLOTS) {
       // slot content that references values that might have changed,
@@ -174,6 +197,7 @@ export function shouldUpdateComponent(
     }
     return hasPropsChanged(prevProps, nextProps)
   }
+
   return false
 }