Vue双向数据绑定原理深度解析

首先，什么是双向数据绑定？Vue是三大MVVM框架之一，数据绑定简单来说，就是当数据发生变化时，相应的视图会进行更新，当视图更新时，数据也会跟着变化。

在分析其原理和代码的时候，大家首先了解如下几个js函数的作用：

1. [].slice.call(lis): 将伪数组转换为真数组
2. node.nodeType: 得到节点类型
3. Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符)
configurable: true/false 是否可以重新define
enumerable: true/false 是否可以枚举(for..in / keys())
value: 指定初始值
writable: true/false value是否可以修改存取(访问)描述符
get: 函数, 用来得到当前属性值
set: 函数, 用来监视当前属性值的变化
4. Object.keys(obj): 得到对象自身可枚举的属性名的数组
5. DocumentFragment: 文档碎片(高效批量更新多个节点)
6. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性

如果想了解这些函数具体使用：请点击这里

首先，我来看一下如何实现最基础的数据绑定：

<body>
    <div>请输入：<input type="text" /></div>
    <div>输入的值为：<span ></span></div>
    

</body>
<script>
        var inputValue = document.getElementById('inputId');
        var showValue = document.getElementById('showId');
        var obj = {};

        Object.defineProperty(obj, 'msg', {
            enumerable: true,
            configurable: true,
            set (newVal) {
                showValue.innerHTML = newVal;
            }
        })

        inputValue.addEventListener('input', function(e) {
            obj.msg = e.target.value;
        })
</script>

View Code