update doc for computed shorthand, minor fix for options

Author: yyx990803

perf/todomvc-benchmark/vue/bower_components/vue/dist/vue.js

@@ -1,5 +1,5 @@
 /*
- VueJS v0.8.0
+ VueJS v0.8.1
  (c) 2014 Evan You
  License: MIT
 */
@@ -843,6 +843,7 @@ function Compiler (vm, options) {
     compiler.vm  = vm
     compiler.bindings = makeHash()
     compiler.dirs = []
+    compiler.deferred = []
     compiler.exps = []
     compiler.computed = []
     compiler.childCompilers = []
@@ -915,11 +916,14 @@ function Compiler (vm, options) {
     // and bind the parsed directives
     compiler.compile(el, true)
 
-    // extract dependencies for computed properties
-    if (compiler.computed.length) {
-        DepsParser.parse(compiler.computed)
+    // bind deferred directives (child components)
+    for (var i = 0, l = compiler.deferred.length; i < l; i++) {
+        compiler.bindDirective(compiler.deferred[i])
     }
 
+    // extract dependencies for computed properties
+    compiler.parseDeps()
+
     // done!
     compiler.init = false
 
@@ -1045,7 +1049,10 @@ CompilerProto.compile = function (node, root) {
             directive = Directive.parse('repeat', repeatExp, compiler, node)
             if (directive) {
                 directive.Ctor = componentCtor
-                compiler.bindDirective(directive)
+                // defer child component compilation
+                // so by the time they are compiled, the parent
+                // would have collected all bindings
+                compiler.deferred.push(directive)
             }
 
         // v-with has 2nd highest priority
@@ -1054,7 +1061,7 @@ CompilerProto.compile = function (node, root) {
             directive = Directive.parse('with', withKey || '', compiler, node)
             if (directive) {
                 directive.Ctor = componentCtor
-                compiler.bindDirective(directive)
+                compiler.deferred.push(directive)
             }
 
         } else {
@@ -1315,10 +1322,7 @@ CompilerProto.defineProp = function (key, binding) {
 CompilerProto.defineExp = function (key, binding) {
     var getter = ExpParser.parse(key, this)
     if (getter) {
-        var value = binding.isFn
-            ? getter
-            : { $get: getter }
-        this.markComputed(binding, value)
+        this.markComputed(binding, getter)
         this.exps.push(binding)
     }
 }
@@ -1329,10 +1333,8 @@ CompilerProto.defineExp = function (key, binding) {
 CompilerProto.defineComputed = function (key, binding, value) {
     this.markComputed(binding, value)
     var def = {
-        get: binding.value.$get
-    }
-    if (binding.value.$set) {
-        def.set = binding.value.$set
+        get: binding.value.$get,
+        set: binding.value.$set
     }
     Object.defineProperty(this.vm, key, def)
 }
@@ -1342,15 +1344,19 @@ CompilerProto.defineComputed = function (key, binding, value) {
  *  so its getter/setter are bound to proper context
  */
 CompilerProto.markComputed = function (binding, value) {
-    binding.value = value
     binding.isComputed = true
     // bind the accessors to the vm
-    if (!binding.isFn) {
-        binding.value = {
-            $get: utils.bind(value.$get, this.vm)
+    if (binding.isFn) {
+        binding.value = value
+    } else {
+        if (typeof value === 'function') {
+            value = { $get: value }
         }
-        if (value.$set) {
-            binding.value.$set = utils.bind(value.$set, this.vm)
+        binding.value = {
+            $get: utils.bind(value.$get, this.vm),
+            $set: value.$set
+                ? utils.bind(value.$set, this.vm)
+                : undefined
         }
     }
     // keep track for dep parsing later
@@ -1390,6 +1396,15 @@ CompilerProto.hasKey = function (key) {
         hasOwn.call(this.vm, baseKey)
 }
 
+/**
+ *  Collect dependencies for computed properties
+ */
+CompilerProto.parseDeps = function () {
+    if (this.computed.length) {
+        DepsParser.parse(this.computed)
+    }
+}
+
 /**
  *  Unbind and remove element
  */
@@ -2477,6 +2492,7 @@ function catchDeps (binding) {
     if (binding.isFn) return
     utils.log('\n- ' + binding.key)
     var got = utils.hash()
+    binding.deps = []
     catcher.on('get', function (dep) {
         var has = got[dep.key]
         if (has && has.compiler === dep.compiler) return
@@ -2502,7 +2518,8 @@ module.exports = {
     parse: function (bindings) {
         utils.log('\nparsing dependencies...')
         Observer.shouldGet = true
-        bindings.forEach(catchDeps)
+        var i = bindings.length
+        while (i--) { catchDeps(bindings[i]) }
         Observer.shouldGet = false
         utils.log('\ndone.')
     }
@@ -3010,11 +3027,15 @@ module.exports = {
             if (method !== 'push' && method !== 'pop') {
                 self.updateIndexes()
             }
+            if (method !== 'sort' && method !== 'reverse') {
+                // re-calculate dependencies
+                self.compiler.parseDeps()
+            }
         }
 
     },
 
-    update: function (collection) {
+    update: function (collection, init) {
 
         this.unbind(true)
         // attach an object to container to hold handlers
@@ -3039,6 +3060,10 @@ module.exports = {
             for (var i = 0, l = collection.length; i < l; i++) {
                 this.buildItem(collection[i], i)
             }
+            if (!init) {
+                // re-calculate dependencies
+                this.compiler.parseDeps()
+            }
         }
     },
 

source/api/instantiation-options.md

@@ -145,14 +145,14 @@ All lifecycle hooks have their `this` context bound to the ViewModel they belong
 ### created
 
 - **Type:** `Function`
-- Alias: `beforeCompile`
+- **Alias:** `beforeCompile`
 
 Called before the compilation starts. Can be used to attach additional data to be observed on the ViewModel.
 
 ### ready
 
 - **Type:** `Function`
-- Alias: `afterCompile`
+- **Alias:** `afterCompile`
 
 Called after the compilation has ended and the ViewModel is ready.
 
@@ -219,5 +219,6 @@ A hash of transitions to be made available to the ViewModel. For details see [Us
 ### lazy
 
 - **Type:** `Boolean`
+- **Default:** `false`
 
 Whether to trigger `v-model` updates only on `change` event (hit enter or lose focus) or on every `input` event (on every keystroke).

source/guide/computed.md

@@ -33,35 +33,47 @@ var demo = new Vue({
 demo.fullName // 'Foo Bar'
 ```
 
+When you only need the getter, you can provide a single function instead of an object:
+
+``` js
+// ...
+computed: {
+    fullName: function () {
+        return this.firstName + ' ' + this.lastName 
+    }    
+}
+// ...
+```
+
 A computed property is essentially a property defined with getter/setter functions. You can use a computed property just like a normal property, but when you access it, you get the value returned by the getter function; when you change its value, you trigger the setter function passing in the new value as its argument.
 
 ## Dependency Collection Gotcha
 
 Like inline expressions, Vue.js automatically collects dependencies for computed properties and refreshes them when their dependencies change. There's one thing to keep in mind though: since Vue.js collects dependencies by monitoring which properties are accessed inside a getter, you need to be careful when there is conditional logic within your getters. Consider this example:
 
 ``` js
-status: {
-    $get: function () {
-        return this.validated
-            ? this.okMsg
-            : this.errMsg
-    }
+// ...
+status: function () {
+    return this.validated
+        ? this.okMsg
+        : this.errMsg
 }
+// ...
 ```
 
 If `validated` is true in the beginning, then `errMsg` will not be accessed and therefore not collected as a dependency. Vice-versa for `okMsg`. To get around this you can simply manually access potentially unreachable properties in your getter:
 
-```
-status: {
-    $get: function () {
-        // access dependencies explicitly
-        this.okMsg
-        this.errMsg
-        return this.validated
-            ? this.okMsg
-            : this.errMsg
-    }
+``` js
+// ...
+status: function () {
+    // access dependencies explicitly
+    this.okMsg
+    this.errMsg
+    return this.validated
+        ? this.okMsg
+        : this.errMsg
 }
+// ...
 ```
 
 <p class="tip">You don't need to worry about this in inline expressions because Vue.js' expression parser takes care of it for you.</p>