improve v-bind implementation and make it work on components (fix vue…

…js#3670)

flow/compiler.js

@@ -50,8 +50,6 @@ declare type ASTElementHandlers = {
   [key: string]: ASTElementHandler | Array<ASTElementHandler>;
 }
 
-declare type ASTElementHooks = { [key: string]: Array<string> }
-
 declare type ASTDirective = {
   name: string;
   value: string;
@@ -106,7 +104,6 @@ declare type ASTElement = {
   staticClass?: string;
   classBinding?: string;
   styleBinding?: string;
-  hooks?: ASTElementHooks;
   events?: ASTElementHandlers;
   nativeEvents?: ASTElementHandlers;
 
@@ -117,6 +114,7 @@ declare type ASTElement = {
 
   forbidden?: true;
   once?: true;
+  wrapData?: (code: string) => string;
 }
 
 declare type ASTExpression = {

flow/component.js

@@ -96,7 +96,7 @@ declare interface Component {
   // renderSlot
   _t: (name: string, fallback: ?Array<VNode>) => ?Array<VNode>;
   // apply v-bind object
-  _b: (vnode: VNodeWithData, value: any) => void;
+  _b: (data: any, value: any, asProp?: boolean) => VNodeData;
   // retrive custom keyCode
   _k: (key: string) => ?number;
 

src/compiler/codegen/index.js

@@ -138,10 +138,6 @@ function genData (el: ASTElement): string | void {
   if (el.props) {
     data += `domProps:{${genProps(el.props)}},`
   }
-  // hooks
-  if (el.hooks) {
-    data += `hook:{${genHooks(el.hooks)}},`
-  }
   // event handlers
   if (el.events) {
     data += `${genHandlers(el.events)},`
@@ -166,7 +162,12 @@ function genData (el: ASTElement): string | void {
       }]}`
     }
   }
-  return data.replace(/,$/, '') + '}'
+  data = data.replace(/,$/, '') + '}'
+  // v-bind data wrap
+  if (el.wrapData) {
+    data = el.wrapData(data)
+  }
+  return data
 }
 
 function genDirectives (el: ASTElement): string | void {
@@ -243,11 +244,3 @@ function genProps (props: Array<{ name: string, value: string }>): string {
   }
   return res.slice(0, -1)
 }
-
-function genHooks (hooks: { [key: string]: Array<string> }): string {
-  let res = ''
-  for (const key in hooks) {
-    res += `"${key}":function(n1,n2){${hooks[key].join(';')}},`
-  }
-  return res.slice(0, -1)
-}

src/compiler/directives/bind.js

@@ -1,9 +1,13 @@
 /* @flow */
 
-import { addHook } from '../helpers'
-
 export default function bind (el: ASTElement, dir: ASTDirective) {
-  addHook(el, 'construct', `_b(n1,${dir.value}${
-    dir.modifiers && dir.modifiers.prop ? ',true' : ''
-  })`)
+  el.wrapData = (code: string) => {
+    return `_b(${
+      code
+    },${
+      dir.value
+    }${
+      dir.modifiers && dir.modifiers.prop ? ',true' : ''
+    })`
+  }
 }

src/compiler/helpers.js

@@ -31,17 +31,6 @@ export function addDirective (
   (el.directives || (el.directives = [])).push({ name, value, arg, modifiers })
 }
 
-export function addHook (el: ASTElement, name: string, code: string) {
-  const hooks = el.hooks || (el.hooks = {})
-  const hook = hooks[name]
-  /* istanbul ignore if */
-  if (hook) {
-    hook.push(code)
-  } else {
-    hooks[name] = [code]
-  }
-}
-
 export function addHandler (
   el: ASTElement,
   name: string,

src/core/instance/render.js

@@ -175,9 +175,10 @@ export function renderMixin (Vue: Class<Component>) {
 
   // apply v-bind object
   Vue.prototype._b = function bindProps (
-    vnode: VNodeWithData,
+    data: any,
     value: any,
-    asProp?: boolean) {
+    asProp?: boolean
+  ): VNodeData {
     if (value) {
       if (!isObject(value)) {
         process.env.NODE_ENV !== 'production' && warn(
@@ -188,7 +189,6 @@ export function renderMixin (Vue: Class<Component>) {
         if (Array.isArray(value)) {
           value = toObject(value)
         }
-        const data: any = vnode.data
         for (const key in value) {
           if (key === 'class' || key === 'style') {
             data[key] = value[key]
@@ -201,6 +201,7 @@ export function renderMixin (Vue: Class<Component>) {
         }
       }
     }
+    return data
   }
 
   // expose v-on keyCodes

src/core/vdom/vnode.js

@@ -44,13 +44,6 @@ export default class VNode {
     this.isRootInsert = true
     this.isComment = false
     this.isCloned = false
-    // apply construct hook.
-    // this is applied during render, before patch happens.
-    // unlike other hooks, this is applied on both client and server.
-    const constructHook = data && data.hook && data.hook.construct
-    if (constructHook) {
-      constructHook(this)
-    }
   }
 }
 

test/unit/features/options/props.spec.js

@@ -259,6 +259,19 @@ describe('Options props', () => {
     })
   })
 
+  it('should work with v-bind', () => {
+    const vm = new Vue({
+      template: `<test v-bind="{ a: 1, b: 2 }"></test>`,
+      components: {
+        test: {
+          props: ['a', 'b'],
+          template: '<div>{{ a }} {{ b }}</div>'
+        }
+      }
+    }).$mount()
+    expect(vm.$el.textContent).toBe('1 2')
+  })
+
   it('should warn data fields already defined as a prop', () => {
     new Vue({
       template: '<test a="1"></test>',

test/unit/modules/compiler/codegen.spec.js

@@ -84,7 +84,7 @@ describe('codegen', () => {
   it('generate v-bind directive', () => {
     assertCodegen(
       '<p v-bind="test"></p>',
-      `with(this){return _h('p',{hook:{"construct":function(n1,n2){_b(n1,test)}}})}`
+      `with(this){return _h('p',_b({},test))}`
     )
   })