Blog

vue 双向绑定的原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，实现视图刷新。

具体流程： Vue中先遍历data选项中所有的属性（发布者）用Object.defineProperty劫持这些属性将其转为getter/setter。读取数据时候会触发getter。修改数据时会触发setter。

然后给每个属性对应new Dep()，Dep是专门收集依赖、删除依赖、向依赖发送消息的。先让每个依赖设置在Dep.target上，在Dep中创建一个依赖数组，先判断Dep.target是否已经在依赖中存在，不存在的话添加到依赖数组中完成依赖收集，随后将Dep.target置为上一个依赖。

组件在挂载过程中都会new一个Watcher实例。这个实例就是依赖（订阅者）。Watcher第二参数是一个函数，此函数作用是更新且渲染节点。在首次渲染过程，会自动调用Dep方法来收集依赖，收集完成后组件中每个数据都绑定上该依赖。当数据变化时就会在setter中通知对应的依赖进行更新。在更新过程中要先读取数据，就会触发Wacther的第二个函数参数。一触发就再次自动调用Dep方法收集依赖，同时在此函数中运行patch（diff运算)来更新对应的DOM节点，完成了双向绑定。

• 每一个组件默认都会创建一个 Watcher，自定义的 watch 和 computed 方法也会创建 Watcher

Object.defineProperty()实现双向绑定的缺点

1. 只能监听某个属性，不能监听整个对象
2. 需要使用for in遍历对象属性绑定监听
3. 不能监听数组，需要重写数组方法进行特异性操作
4. 会污染原对象

vuex

数据驱动模板（管理共享状态） 核心store仓库（响应式的状态存储） 提交mutation才能修改内部状态 记录每次改变保存状态快照

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations: {
        increase(state){
            state.count++;
        }
    },
    // 开启严格模式
    strict: process.env.NODE_ENV !== 'production'
    // 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
})

store.commit('increase');
store.state.count;

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。