el

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}}`
+  }
 }

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

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

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