vue 给div内赋值_vue中的双向数据绑定详解

前言

什么是数据双向绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突，我们可以这么解决。

为什么要实现数据的双向绑定？

在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。

即两者并不互斥， 在全局性数据流使用单项，方便跟踪； 局部性数据流使用双向，简单易操作。

一、访问器属性

Object.defineProperty()函数可以定义对象的属性相关描述符， 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用，下面，我们看看这个函数的基本使用方式。

var obj ={

foo:'foo'}

Object.defineProperty(obj,'foo', {get: function () {

console.log('将要读取obj.foo属性');

},set: function (newVal) {

console.log('当前值为', newVal);

}

});

obj.foo;//将要读取obj.foo属性

obj.foo = 'name'; //当前值为 name

可以看到，get即为我们访问属性时调用，set为我们设置属性值时调用。

二、简单的数据双向绑定实现方法

forvue

输入：

var obj ={},

textInput= document.querySelector('#textInput'),

textSpan= document.querySelector('#textSpan');

Object.defineProperty(obj,'foo', {set: function (newValue) {

textInput.value=newValue;

textSpan.innerHTML=newValue;

}

});

textInput.addEventListener('keyup', function (e) {

obj.foo=e.target.value;

});

最终效果图：

可以看到，实现一个简单的数据双向绑定还是不难的： 使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值，即可实现这样的一个简单的数据双向绑定。

三、 实现任务的思路

上面我们只是实现了一个最简单的数据双向绑定，而我们真正希望实现的时下面这种方式：

{ { text }}

var vm = newVue({

el:'#app',

data: {

text:'hello world'}

});

即和vue一样的方式来实现数据的双向绑定。那么，我们可以把整个实现过程分为下面几步：

输入框以及文本节点与 data 中的数据绑定

输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。

data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

四、DocumentFragment

如果希望实现任务一，我们还需要使用到 DocumentFragment 文档片段，可以把它看做一个容器，如下所示：

var flag =document.createDocumentFragment(),

span= document.createElement('span'),

textNode= document.createTextNode('hello world');

span.appendChild(textNode);<