vue 源码分析双向数据binding的方法

最新推荐文章于 2023-03-06 15:49:14 发布

weixin_33882443

最新推荐文章于 2023-03-06 15:49:14 发布

阅读量122

点赞数

文章标签： javascript ui swift ViewUI

原文链接：https://juejin.im/post/5a31f136f265da432b4ad564

版权

我们的目的是：更新数据->自动更新ui 1.首要检测数据有没有变化 2.更新ui

根据 vue 的思想, es5 提供我们一个方法，为一个对象某一个属性设置监听方法。

    var data = {
          a: 5;
    }
    
     //我们设置了 data对象的a属性的监听
      Object.defineProperty(data, a, { 
          set: function(newVal) {
                  console.log(newVal,'为data.a设置了新值');
          },
          get: function() {
               console.log('获取data.a');
                return variable; 
          }
       )

    data.a = 10;//会调用set方法
    //打印：10为data.a设置了新值。
    var c = data.a;//会调用gat方法
    //打印：获取data.a
复制代码

吐槽一下，这个Swift语法一模一样啊，但是 Swift 除了 set 和 gat 方法以外还有 willSet 即将改变和 didSet 改变后的方法。
这是 vue 官方的源码地址 https://github.com/vuejs/vue/blob/871ed9126639c9128c18bb2f19e6afd42c0c5ad9/explorations%2Fgetset.html

###我把源码稍微修改了（基本没动），添加了一些注释。 Chrome 可以直接粘贴运行。

先用正则把{{}}这里面的数据找到。以属性为“data-element-binding”绑定到DOM树上
根据DOM树上“data-element-binding”，找到当前的DOM。
根据DOM里的参数与data里的属性，通过defineProperty绑定。
更新data数据，然后DOM自动更新了。

<!DOCTYPE html>
<html>

<head>
    <title>ideal</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="test">
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        <p>{{what}}</p>
        <p>{{hey}}</p>
    </div>
    <script>
        var bindingMark = 'data-element-binding'

        function Element(id, initData) {
            var el = document.getElementById(id)
            var bindings = {} //内部暂存绑定数据及dom
            var data = {} //存储bingding数据并实现监控
            var content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken) //让{{msg}} 换成 <span data-element-binding="msg"></span>
            el.innerHTML = content //复制回去

            for (var variable in bindings) {
                bind(variable); //将每个数据的名称比如'msg'绑定到data
            }
            if (initData) {
                for (var variable in initData) {
                    data[variable] = initData[variable]
                }
            }

            function markToken(match, variable) { //遍历  match {{msg}}  variable 'msg'
                bindings[variable] = {} //bindings里存储了数据来源的字段比如bindings['msg']
                return '<span ' + bindingMark + '="' + variable + '"></span>'
            }

            function bind(variable) {
                bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]'); //bindings里再存储msg绑定的元素

                [].forEach.call(bindings[variable].els, function(e) { //删除data-element-binding属性
                    e.removeAttribute(bindingMark);
                })

                Object.defineProperty(data, variable, { //es5观察属性
                    set: function(newVal) {
                        console.log(variable);
                        [].forEach.call(bindings[variable].els, function(e) {
                            bindings[variable].value = newVal; //=>这里才是实现的绑定,更新内部暂存数据， 为了以后取
                            e.textContent = newVal; //更新数据到dom
                        })
                    },
                    get: function() {
                        return bindings[variable].value; //取数据仅仅是内部暂存的数据
                    }
                })
            }
        }

        var app = new Element('test', {
            msg: 'hello',
            what: 'hi'
        })
    </script>
</body>

</html>


复制代码