简单实现vue双向数据绑定

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 data 中的数据时自动调用 get 方法,当修改 data 中的数据时,自动调用 set 方法,检测到数据的变化,会通知观察者 Wacher,观察者 Wacher自动触发重新render 当前组件(子组件不会重新渲染),生成新的虚拟 DOM 树,Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别,并记录下来,最后,加载操作,将所有记录的不同点,局部修改到真实 DOM 树上。

简单实现vue双向数据绑定

 

 虚拟DOM (Virtaul DOM): 用 js 对象模拟的,保存当前视图内所有 DOM 节点对象基本描述属性和节点间关系的树结构。用 js 对象,描述每个节点,及其父子关系,形成虚拟 DOM 对象树结构。

 

简单实现vue双向数据绑定:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="inp" type="text">
    <span id="spanEle"></span>

</body>
<script>
    let inpEle = document.getElementById('inp');
    let spanEle = document.getElementById('spanEle');

    inpEle.addEventListener('input', function () {
        data.name = inpEle.value;
    })

    function render() {
        spanEle.innerHTML = JSON.stringify(data);
    }
    let data = {
        name: '请输入你的姓名',
        location: { x: 100, y: 100 }
    }
    inpEle.value = data.name;
    observe(data)
    function observe(obj) { // 数据劫持
        // 判断类型
        if (!obj || typeof obj !== 'object') {
            return
        }
        Object.keys(obj).forEach(key => {
            defineReactive(obj, key, obj[key])
        })
        function defineReactive(obj, key, value) {
            // 递归子属性
            observe(value)
            Object.defineProperty(obj, key, {
                enumerable: true, //可枚举(可以遍历)
                configurable: true, //可配置(比如可以删除)
                get: function reactiveGetter() {
                    console.log('get:', value) // 监听
                    return value
                },
                set: function reactiveSetter(newVal) {
                    observe(newVal) //如果赋值是一个对象,也要递归子属性
                    if (newVal !== value) {
                        value = newVal
                        render()
                        console.log('set:', newVal) // 监听

                    }
                }
            })
        }
    }

    setTimeout(() => {
        data.location = {
            x: { xx: { xxx: 2020 } },
            y: 2020
        }
        console.log(data.name);
    }, 1000)

    setTimeout(() => {
        data.location.x.xx.xxx = 0823;
    }, 4000)

</script>

</html>

 

上一篇:v-model双向绑定


下一篇:375 数据双向绑定演示:一个 input + v-model,Object.defineProperty,数据双向绑定的原理简单实现