vue2.0响应式源码解析

本文只帮助于理解vue2.0怎么做到事件绑定、双向数据绑定、vue底层处理

vue是一个mvvm模式的渐进式框架

Vue与React、Angular的不同是，但它是渐进的

使用Angular，必须接受以下东西

1、必须使用它的模块机制

2、必须使用它的依赖注入

3、必须使用它的特殊形式定义组件

使用React，你必须理解

1、函数式编程的理念

2、需要知道它的副作用

3、什么是纯函数

4、如何隔离、避免副作用

MVVM初始化

在Vue初始化时会根据id获取dom对命令进行解析

1、根据dom获取对HTML进行解析

解析on命令,实现事件注册

将on指令进行切割去除on:click中的click进行事件注册

// 将on命令根据dom进行注册(node为dom)
eventHandler: function(node, vm, exp, dir) {
        var eventType = dir.split(':')[1],
            fn = vm.$options.methods && vm.$options.methods[exp];

        if (eventType && fn) {
            node.addEventListener(eventType, fn.bind(vm), false);
        }
    },

解析v-model

将v-model命令注册进入input监听中

node.addEventListener('input', function(e) {
            var newValue = e.target.value;
            if (val === newValue) {
                return;
            }

            me._setVMVal(vm, exp, newValue);
            val = newValue;
        });

如何做到input监听与html中input相互绑定呢???

当数据发生改变时会将新数据塞入dom中

在初始化时做了什么操作呢?

在vue初始化时会将dom,options,一起传入

options : {data,methods,...}

第一步:

将options函数中的数据注入defineProperty进行get,set,同时将data对象中注入计算

///me : this
Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });

计算属性的实现

获取到options中的key,在Object.defineProperty进行get返回即可

第二步:

将options传入监听者Observer进行Object.defineProperty监听,并同时初始化订阅者Dep,当数据发生变化时会通知订阅者

第三步:

将dom中传入命令解析器中对命令进行解析,详情看[根据dom获取对HTML进行解析]

监听者职责

将数据放入Object.defineProperty中,并添加进入订阅者集合,

当数据发生变化时,会通知订阅者进行处理

订阅者职责

当监听者通知订阅者时,订阅者将数据产生变化传递给观察者

然后根据订阅者集合中数据进行数据更新

监听属性怎么来的呢

在mvvm初始化时同步将options传入了观察者,当数据通知到观察者是,就会进行数据更新,进而达到了数据监听的目的

watch

下面看下mvvm解释图

vue20220729.png

vue-20220729.png