Loading

杂记 -- 关于vue数据绑定原理

1、vue数据双向绑定(v-model)

主要实现依赖于数据的劫持，及观察订阅者模式的使用，其中Object.defineProperty()为核心

作用：定义或修改一个对象上的相关属性及其相关的操作
语法: Object.defineProperty(obj, prop, descriptor)
其中：
obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符，分为数据描述符or存取描述符；
用bject.defineProperty(),简单实现输入框与数据的绑定：

<body>
    <div>
        <input type="text" id="input">
        <span id="data"></span>
    </div>
    <script>
        var obj = {};
        console.log(obj);
        Object.defineProperty(obj, 'value', {
            get: function() {
                console.log('调用了get方法');
            },
            set: function(newValue) {
                console.log('调用了set方法，值为:' + newValue);
                value = newValue;
                document.getElementById('input').value = value;
                document.getElementById('data').innerText = value;
            }
        })
        document.getElementById('input').onkeyup = function(e) {
            obj.value = e.target.value; //e.target相当于触发事件的dom节点
        }
    </script>
</body>

关于vue中双向绑定可以分为：1、data数据与输入框及显示的文本节点绑定 2、输入框修改影响data和文本节点的数据 3、data中数据的改变影响输入框及文本节点。

2、vue中数据绑定（v-bind）

vue常用指令之一，单向绑定数据，常用与标签属性的绑定：<input type="text" id="input" :value="data">
其中value为input标签的一个属性，v-bind会使其内容变为js表达式，相当于把'data'变成一个变量，修改data的值会同步到标签属性中。

3、MVVM框架（Model-View-ViewModel）

  • Model:指的是后端传送的数据
  • View:指的是页面当前视图
  • ViewModel：指的是连接视图和数据的一个桥梁对象

例如:vue中每个组件的实例对象，将数据渲染到视图中，有实时监听视图中用户对数据的操作，做到视图与数据的双向绑定

posted @ 2020-02-02 18:56  逝zxq  阅读(179)  评论(0)  编辑  收藏  举报