From d018a726a63ae9fc7dfc815d560e1987032a6eac Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sat, 16 Apr 2016 18:21:35 -0400
Subject: [PATCH] el

---
 src/compiler/codegen/directives/el.js | 10 +++++--
 src/compiler/codegen/index.js         | 18 ++++++++++--
 src/runtime-with-compiler.js          |  8 +++++-
 src/runtime/instance/lifecycle.js     | 41 +++++++++++++++------------
 4 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/compiler/codegen/directives/el.js b/src/compiler/codegen/directives/el.js
index 7d92cdc1..3827c04e 100644
--- a/src/compiler/codegen/directives/el.js
+++ b/src/compiler/codegen/directives/el.js
@@ -1,4 +1,10 @@
 export function el (el, dir) {
-  console.log(el)
-  console.log(dir)
+  if (!el.hooks) el.hooks = {}
+  const code = `$els["${dir.arg}"]=vnode.elm`
+  if (el.hooks.insert) {
+    el.hooks.insert = el.hooks.insert
+      .replace(/^function\(vnode\)\{(.*)\}$/, `function(vnode){$1;${code}}`)
+  } else {
+    el.hooks.insert = `function(vnode){${code}}`
+  }
 }
diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
index 57b60bff..326ca215 100644
--- a/src/compiler/codegen/index.js
+++ b/src/compiler/codegen/index.js
@@ -88,11 +88,15 @@ function genData (el) {
   }
   // props
   if (el.props) {
-    data += 'props:{' + genProps(el.props) + '},'
+    data += `props:{${genProps(el.props)}},`
   }
   // attributes
   if (el.attrs) {
-    data += 'attrs:{' + genProps(el.attrs) + '},'
+    data += `attrs:{${genProps(el.attrs)}}`
+  }
+  // hooks
+  if (el.hooks) {
+    data += `hook:{${genHooks(el.hooks)}},`
   }
   // event handlers
   if (el.events) {
@@ -138,9 +142,17 @@ function genSlot (el) {
 
 function genProps (props) {
   let res = ''
-  for (var i = 0; i < props.length; i++) {
+  for (let i = 0; i < props.length; i++) {
     let prop = props[i]
     res += `"${prop.name}":${prop.value},`
   }
   return res.slice(0, -1)
 }
+
+function genHooks (hooks) {
+  let res = ''
+  for (let key in hooks) {
+    res += `"${key}":${hooks[key]},`
+  }
+  return res.slice(0, -1)
+}
diff --git a/src/runtime-with-compiler.js b/src/runtime-with-compiler.js
index cbf96859..837be919 100644
--- a/src/runtime-with-compiler.js
+++ b/src/runtime-with-compiler.js
@@ -4,6 +4,12 @@ import { getOuterHTML, query, warn } from './runtime/util/index'
 import Vue from './runtime/index'
 
 const mount = Vue.prototype.$mount
+const idTemplateCache = Object.create(null)
+
+function idToTemplate (id) {
+  const hit = idTemplateCache[id]
+  return hit || (idTemplateCache[id] = query(id).innerHTML)
+}
 
 Vue.prototype.$mount = function (el) {
   const options = this.$options
@@ -13,7 +19,7 @@ Vue.prototype.$mount = function (el) {
     if (template) {
       if (typeof template === 'string') {
         if (template.charAt(0) === '#') {
-          template = query(template).innerHTML
+          template = idToTemplate(template)
         }
       } else if (template.nodeType) {
         template = template.innerHTML
diff --git a/src/runtime/instance/lifecycle.js b/src/runtime/instance/lifecycle.js
index 1f03f1eb..f61a580e 100644
--- a/src/runtime/instance/lifecycle.js
+++ b/src/runtime/instance/lifecycle.js
@@ -1,36 +1,30 @@
 import Watcher from '../observer/watcher'
-import { query, toArray } from '../util/index'
-
-export function callHook (vm, hook) {
-  vm.$emit('pre-hook:' + hook)
-  var handlers = vm.$options[hook]
-  if (handlers) {
-    for (var i = 0, j = handlers.length; i < j; i++) {
-      handlers[i].call(vm)
-    }
-  }
-  vm.$emit('hook:' + hook)
-}
+import { defineReactive } from '../observer/index'
+import { set, query, toArray } from '../util/index'
 
 export function initLifecycle (vm) {
+  vm.$children = []
+  vm._isDestroyed = false
+  vm._isBeingDestroyed = false
+
+  defineReactive(vm, '$refs', {})
+  defineReactive(vm, '$els', {})
+
   const options = vm.$options
+
   // parent
   vm.$parent = options.parent
   vm.$root = vm.$parent ? vm.$parent.$root : vm
   if (vm.$parent) {
     vm.$parent.$children.push(vm)
   }
+
   // context & ref
   vm._context = options._context
   vm._ref = options._renderData && options._renderData.ref
   if (vm._ref) {
-    vm._context.$refs[vm._ref] = vm
+    set(vm._context.$refs, vm._ref, vm)
   }
-  vm.$children = []
-  vm.$refs = {}
-  vm.$els = {}
-  vm._isDestroyed = false
-  vm._isBeingDestroyed = false
 }
 
 export function lifecycleMixin (Vue) {
@@ -86,3 +80,14 @@ export function lifecycleMixin (Vue) {
     this.$off()
   }
 }
+
+export function callHook (vm, hook) {
+  vm.$emit('pre-hook:' + hook)
+  var handlers = vm.$options[hook]
+  if (handlers) {
+    for (var i = 0, j = handlers.length; i < j; i++) {
+      handlers[i].call(vm)
+    }
+  }
+  vm.$emit('hook:' + hook)
+}