Vue实现数据绑定的原理

最新推荐文章于 2021-08-03 15:25:18 发布

灰海

最新推荐文章于 2021-08-03 15:25:18 发布

阅读量1.9k

点赞数 6

文章标签： js vue vue.js javascript

本文链接：https://blog.csdn.net/weixin_44149821/article/details/109752734

版权

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

在这里插入图片描述

<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>

灰海

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
12
评论
Vue实现数据绑定的原理

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

扫一扫