好程序员 Web 前端 教程分享 Vue 学习心得 ， Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。 Vue+webpack 也成了很多开发项目的标配。在学习的过程中也碰到了很多坑，在这里分享下自己学习的一些心得。

　　Vue 是组件化的，每一个部分都可以做成一个组件，但是这里就出现了一个问题，就是组件之间如果涉及到传值问题，就会比较麻烦。如果涉及到兄弟组件的传值，我们可以给 Vue 实例上挂载一个 $bus 属性

　　之后可以通过 this.$bus.$emit 来推送数据， this.$bus.$on 来接收数据。

　　Vue 本身并不鼓励使用 DOM 操作 ( 并不是不能 ) ，如果你希望获取到节点，那么可以通过 ref 属性做到。

　　然后可以通过 this.$refs 访问到所有具有 ref 属性的节点。

　　如果你希望获取 input 的 value 值，你还可以通过 v-model 属性做到。 V-model 实际上实现了数据的双向绑定。把 Model 绑定到 View ，当我们用 JavaScript 代码更新 Model 时， View 就会自动更新。如果用户更新了 View ， Model 的数据也自动被更新了，这种情况就是双向绑定。什么情况下用户可以更新 View 呢 ? 填写表单就是一个最直接的例子。当用户填写表单时， View 的状态就被更新了，如果此时 MVVM 框架可以自动更新 Model 的状态，那就相当于我们把 Model 和 View 做了双向绑定。 Vue 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调来实现数据的双向绑定的。

　　Vue 本身提供了特有的计算属性 computed 。经常有人会分不清 computed 和 watch 。关于 computed 和 watch 的比较， computed 是计算属性，会被混入到 Vue 实例中，计算属性具有依赖性，如果依赖的那个数值没有发生改变，那么就会执行一次，除非依赖发生改变，它才会重新开始计算。 watch 是观察属性， Vue 将会在实例化的时候调用 watch ，遍历 watch 对面的每一个属性，当其中属性发生变化时，都会触发 watch 。以上两种都不能使用箭头函数来定义，因为箭头函数是绑定了父级作用域的上下文，此时的 this 并没有指向 Vue 实例。

　　 另外一个容易弄混的是指令 v-if 和 v-show 。两者的区别是， v-if 和 v-show 都能够控制组件的显示和隐藏，区别在于 v-show 为 false 的时候页面加载的时候就会把组件加载进来，只是把组件的 display 属性设置为 none 而已，然后 v-if 为 false 的，组件是不会加载进来的，只有当值为 true 的时候才会把组件加载进来，所以实现按需加载就可以使用 v-if ，只是控制组件的显示隐藏就可以使用 v-show 。