vue数据双向绑定原理-observer

邱秋1年前 14:16
vue数据双向绑定原理, 和简单的实现


​​1)vue数据双向绑定原理-observer
​2)vue数据双向绑定原理-wather​
3)vue数据双向绑定原理-解析器Complie

vue数据双向绑定原理, 和简单的实现

去他喵的底层原理,框架内核, 老夫写代码只用Jquery 。

个人觉得,不论是否 是长期与之交集, 还是应该看下核心的东西. 多多了解高人是如何实现的 , 这样才能学到更多的知识, 才能成长进步.  倘若某天被人问起, 某种框架 内裤,其实现原理, 那么只能是一脸懵逼了..

实现数据绑定的做法有大致如下几种:

-发布者-订阅者模式(backbone.js)

-脏值检查(angular.js)

-数据劫持(vue.js)

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty() 来劫持各个属性的setter , getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

假如写过C# winform 自定义控件的, 我想更好理解之后的逻辑和实现原理

在C# 中 当控件的某个属性发生了变化, 就刷新视图

priveate int  a ;
public  int A
{
   get { return a; }
   set { if(a!=value){a = value;Invalidate();} }
}
# 当a的值发生变化,就重绘视图

再来看看Object.defineProperty(obj,prop,descriptor)  方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

obj 需要被操作的目标对象

prop 目标对象需要定义或修改的属性的名称。

descriptor 将被定义或修改的属性的描述符

descriptor => configurable 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。

enumerable 当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。 数据描述符同时具有以下可选键值:

value 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

writable 当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。 存取描述符同时具有以下可选键值:

get 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

先来实现一个简单数据劫持

var A = {}
var a = ''
Object.defineProperty(A, 'a', {
    set: function (value) {
        a = value
    },
    get: function () {
        return 'My name is ' + a
    }
})

A.a = 'chuchur'
console.log(A.a) // My name is chuchur

不光是这么简单, 来看下vue 的代码

<div id="app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

已经实现的简单的数据劫持, 那么有多个属性,就要实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,还需要一个订阅器Dep来收集这些属性的变动来通知订阅者

元素节点的v-model, v-on:click ,就需要实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

最后实现一个订阅者Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

大概的流程图如下:

实现Observer

将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

// observe
function observe(data) {
    if (data && typeof data === 'object') {
        // 取出所有属性遍历
        Object.keys(data).forEach(function (key) {
            defineReactive(data, key, data[key]);
        });
    }
    return
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function () {
            return val;
        },
        set: function (value) {
            console.log('监听到值变化了: ', val, '==>', value);
            val = value;
        }
    });
}
var A = {
    fristName: 'chuchur',
    age: 29
}
observe(A)

A.fristName = 'nana' //监听到值变化了:  chuchur ==> nana
A.age = 30 //监听到值变化了:  29 ==> 30

这样就实现了多个属性的监听,接下来就是实现订阅器Dep, 当这些属性变化的时候,触发通知notify,告诉执行订阅者 执行更新函数

//Dep
function Dep() {
    this.subs = [];
};
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

把订阅器植入到监听器里

function defineReactive(data, key, val) {
    var dep = new Dep()
    observe(val);  //监听子属性
    Object.defineProperty(data, key, {​
        set: function (value) {​
            dep.notify() //发出通知,我被改变了
        }
    });
}

至此,简陋的 监听器就实现完成了, 接下来继续完成 Watcher.

本文于1年前 14:16发布在code分类下,当前已被围观2434次

相关标签:vue,

永久地址:https://www.chuchur.com/article/vue-mvvm-observer

版权声明: 自由转载-署名-非商业性使用

aMac OSChrome65中国 云浮 电信#14
1
testMac OSChrome68中国 北京 联通#30
joker
testMac OSChrome68中国 北京 联通#31
joker
woMac OSChrome71火星#37
不错
tMac OSChrome71火星#38
不错
匿名用户