vue基础之data

使用

调用data

onLoad(option) {

    _self = this;

    _self.$data.xxxx = "te";

}

绑定节点

元素~~~~

<input @click="categoryChange" :data-id="item.id" />

方法

methods: {

    tabSelect(e) {

        this.TabCur = e.currentTarget.dataset.id;

    },

}

双向绑定原理

https://www.cnblogs.com/wangjiachen666/p/9883916.html

原理

Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。

也就是说：

输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。

data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

使数据对象变得“可观测”

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

依赖收集

完成了数据的'可观测'，即我们知道了数据在什么时候被读或写了，那么，我们就可以在数据被读或写的时候通知那些依赖该数据的视图更新了，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。其实，这就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。

订阅者Watcher

订阅者Watcher 是一个类，在它的构造函数中，定义了一些属性：

vm:一个Vue的实例对象；

exp:是node节点的v-model或v-on：click等指令的属性值。如v-model="name"，exp就是name;

cb:是Watcher绑定的更新函数;

总结

实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。

代码

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1 id="name"></h1>

    <input type="text">

    <input type="button" value="改变data内容" onclick="changeInput()">

<script src="observer.js"></script>


<script src="watcher.js"></script>


<script>


function myVue (data, el, exp) {


this.data = data;


observable(data);                      //将数据变的可观测


el.innerHTML = this.data[exp];           // 初始化模板数据的值


new Watcher(this, exp, function (value) {


el.innerHTML = value;


});


return this;


}
var ele = document.querySelector('#name');

var input = document.querySelector('input');

var myVue = new myVue({

    name: 'hello world'

}, ele, 'name');

//改变输入框内容

input.oninput = function (e) {

    myVue.data.name = e.target.value

}

//改变data内容

function changeInput(){

    myVue.data.name = "难凉热血"

}


</script>


</body>


</html>

observer.js

  /**

     * 把一个对象的每一项都转化成可观测对象

     * @param { Object } obj 对象

     */

    function observable (obj) {

        if (!obj || typeof obj !== 'object') {

            return;

        }

        let keys = Object.keys(obj);

        keys.forEach((key) =>{

            defineReactive(obj,key,obj[key])

        })

        return obj;

    }

    /**

     * 使一个对象转化成可观测对象

     * @param { Object } obj 对象

     * @param { String } key 对象的key

     * @param { Any } val 对象的某个key的值

     */

    function defineReactive (obj,key,val) {

        let dep = new Dep();

        Object.defineProperty(obj, key, {

            get(){

                dep.depend();

                console.log(`${key}属性被读取了`);

                return val;

            },

            set(newVal){

                val = newVal;

                console.log(`${key}属性被修改了`);

                dep.notify()   //数据变化通知所有订阅者

            }

        })

    }

    class Dep {
    constructor(){

        this.subs = []

    }

    //增加订阅者

    addSub(sub){

        this.subs.push(sub);

    }

    //判断是否增加订阅者

    depend () {

        if (Dep.target) {

            this.addSub(Dep.target)

        }

    }

    //通知订阅者更新

    notify(){

        this.subs.forEach((sub) =&gt;{

            sub.update()

        })

    }

}

Dep.target = null;

watcher.js

  class Watcher {

        constructor(vm,exp,cb){

            this.vm = vm;

            this.exp = exp;

            this.cb = cb;

            this.value = this.get();  // 将自己添加到订阅器的操作

        }

        get(){

            Dep.target = this;  // 缓存自己

            let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数

            Dep.target = null;  // 释放自己

            return value;

        }

        update(){

            let value = this.vm.data[this.exp];

            let oldVal = this.value;

            if (value !== oldVal) {

                this.value = value;

                this.cb.call(this.vm, value, oldVal);

            }

    }

}