• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Vue实现数据绑定的原理

互联网 diligentman 1周前 (11-18) 7次浏览

当把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,使用Object.defineProperty(Vue2.x)(vue3->proxy) 把这些属性全部转为 **getter/setter(数据劫持或数据映射)。**在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

Vue实现数据绑定的原理

<body>
    <div id="app">
        <div id="msg"></div>
        <input type="text" name="" id="" oninput="changeVal(this)" />
    </div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    // 1. 定义对象
    var userInfo = {
        name: "这个信息虽然用户看不到,但是Vue可以追踪到",
    };
    
    // 2. 数据劫持
    var obj = {};
    Object.defineProperty(obj, "name", {
        get() {
            return userInfo.name;
        },
        set(data) {
            userInfo.name = data;
            document.getElementById("msg").innerHTML = data;
            return true;
        },
    });

    // 3. 实时渲染
    document.getElementById("msg").innerHTML = obj.name;

    // 4. 订阅
    function changeVal(eleObj) {
        let value = eleObj.value;
        obj.name = value;
        return true;
    }
</script>


喜欢 (0)