好程序员Web前端教程分享Vue学习心得

好程序员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。