这里我们定义了一个 currentView 字段，当然可以是任意名称，然后通过特殊的 component 标签来进行组件切换：
<component :is="currentView"></component>
<ul>
<li><label><input type="radio" name='page' value='todo' v-model='currentView'> Home</label></li>
<li><label><input type="radio" name='page' value='about' v-model='currentView'> About</label></li>
</ul>
上面的代码有两处需要注意：
•通过 component这个特殊标签，然后用 :is 属性来进行组件的切换。
•radio 通过双向绑定来修改 currentView 字段，从而实现点击之后就可以进行切换。
数据绑定的实现原理
Vue 把双向绑定称作 reactive，可以翻译为响应式数据绑定。内部是通过 ES5 定义的 getter 和 setter 方法实现的，所以不支持 IE8 及以下浏览器，这种实现方式有两个容易犯错的地方：
•如果在 data 上直接添加和删除属性是无法被检测到的，一般删除是不会的，但是可能会动态添加，这个时候应该通过 vm.$set(“name”, value) 的方式来添加。
•无法检测到对象内部的变化，也就是只能检测 data 的属性变化，如果 data.a 是一个对象，那么 data.a.b = 1 这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 就行了。
异步更新机制
Vue 对DOM的更新是异步的！ 这个异步是在一个异步队列中进行的，不过这个异步队列会在当前的 Event Loop 中执行完，所以如果修改了 Data 立刻去DOM中做查询操作是不对的，这个时候DOM还没有更新，正确的做法是这样做：
vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
或者这样：
vm.$nextTick(function () {
this.$el.textContent === 'new message' // true
})花了半天时间才看完组件，下面应该去看一下另一个重点： Directive
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
