VUE 数据上绑定原理以及简易实现

最新推荐文章于 2022-11-02 19:04:46 发布

纷纷宿雾空

最新推荐文章于 2022-11-02 19:04:46 发布

阅读量1.8k

点赞数 2

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_61334593/article/details/120939471

版权

1.vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。

通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时。Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者。通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}）。最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；

*数据劫持：当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。我们可以在触发函数的时候动一些手脚做点我们自己想做的事情，这也就是“劫持”操作。

2.简易实现

<!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 type="text" class="aa" value="" oninput="newdata(this.value)">
    <h2 class="bb"></h2>

</body>
<script>
    //获取DOM节点
    let data = {}
    let aa = document.querySelector('.aa')
    let bb = document.querySelector('.bb')
    Object.defineProperty(data, 'msg', {

        get: function () {
            return data
        },
        set: function (newvalue) {
            aa.value = newvalue
            bb.innerHTML = newvalue
        }

    })
    // 最初的赋值
    title.innerHTML = data.msg;
    ipt.value = data.msg;

    // 拿到input的数据，修改msg，当msg修改时，会触发set方法
    function newdata(value) {
        console.log(value)
        data.msg = value
    }
</script>

</html>