使用 Vue 脚手架（2）+vue 数据双向绑定的原理携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天
五、全局事件总线
4.指定事件总线对象
new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype. $globalEventBus = this<br> },<br> }).$ mount('#root')

5.绑定事件
this. $globalEventBus.$ on('deleteTodo', this.deleteTodo)

6.分发事件
this. $globalEventBus.$ emit('deleteTodo', this.index)

7.解绑事件
this. $globalEventBus.$ off('deleteTodo')

六、消息订阅与发布
1.消息订阅与发布这种方式的思想与全局事件总线很相似，它包含以下操作:
1）订阅消息 --对应绑定事件监听
2）发布消息 --分发事件
3）取消消息订阅 --解绑事件监听
需要引入一个消息订阅与发布的第三方实现库: PubSubJS

2.使用 PubSubJS
1）在线文档: github.com/mroderick/P…
2）下载: npm install -S pubsub-js
3. 相关语法

import PubSub from 'pubsub-js' // 引入
PubSub.subscribe(‘msgName’, functon(msgName, data){ })
PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用
PubSub.unsubscribe(token): 取消消息的订阅

七、过度与动画
1.vue 动画的理解
1）操作 css 的 trasition 或 animation
2）vue 会给目标元素添加/移除特定的 class

2.过渡的相关类名：
1）xxx-enter-active: 指定显示的 transition
2）xxx-leave-active: 指定隐藏的 transition
3）xxx-enter/xxx-leave-to: 指定隐藏时的样式

4.基本过渡动画的编码
1）在目标元素外包裹
2）定义 class 样式
3）指定过渡样式: transition
4）指定隐藏时的样式: opacity/其它

八、vue 数据双向绑定的原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和 getter这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个 update()方法
3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。

第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。