vue中的双向数据绑定原理与常见操作技巧详解
本文实例讲述了vue中的双向数据绑定原理与常见操作技巧。分享给大家供大家参考，具体如下：
成都创新互联公司秉承实现全网价值营销的理念，以专业定制企业官网，网站建设、网站设计，重庆小程序开发公司，网页设计制作，成都做手机网站，成都全网营销推广帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理，汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。
什么是双向数据绑定？
vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单向的，这时就会和双向数据绑定有冲突，我们可以这么解决。
为什么要实现数据的双向绑定？
在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪，局部性数据流使用双向，简单易操作。
1.访问器属性
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为我们设置属性值时调用。
2.简单的数据双向绑定实现方法
forvue 输入：
可以看到，实现一个简单的数据双向绑定还是不难的，使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改input的value值以及span中的innerHTML，然后监听input的keyup事件，修改对象的属性值，即可以实现这样一个简单的数据双向绑定。
3. 实现任务的思路
上面我们只是实现了一个简单的数据双向绑定，而我们真正希望实现的是下面这种方式：
{{ text }}
即和vue一样的方式来实现数据的双向绑定，那么我们可以把整个实现过程分为下面几步：
输入框以及文本节点与data中的数据绑定
输入框内容变化时，data中的数据同步变化。即view => model的变化。
data中的数据变化 时，文本节点的内容同步变化。即model => view的变化。
4.DocumentFragment
如果希望实现任务，我们还需要使用到DocumentFragment文档片段，可以把它看做一个容器，如下所示：
使用文档片段的好处在于：在文档片段上进行操作DOM，而不会影响到真实的DOM，操作完成后，我们就可以添加到真实的DOM上，这样的效率比直接在正式DOM上修改要高很多。
vue在进行编译时，就是将挂载目标的所有子节点劫持到DocumentFragment中，经过一番处理之后，再将DocumentFragment整体返回插入挂载目标。
5.初始化数据绑定
function compile(node, vm) {
var reg = /\{\{(.*)\}\}/
// 如果节点是元素
if (node.nodeType === 1) {
var attr = node.attributes
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName === 'v-model') {
var name = attr[i].nodeValue
node.value = vm.data[name]
node.removeAttribute('v-model')
}
}
}
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1
name = name.trim()
node.nodeValue = vm.data[name]
}
}
}
function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment()
var child
while(child = node.firstChild) {
compile(child, vm)
flag.appendChild(child)
}
return flag
}
function Vue(options) {
this.data = options.data
var el = options.el
var dom = nodeToFragment(document.querySelector(el), this)
document.querySelector(el).appendChild(dom)
}
var vm = new Vue({
el: '#app',
data: {
text: 'hello'
}
})
6.响应式的数据绑定
我们再来看看任务的实现思路，当我们在输入框输入数据的时候，首先触发input事件（或者keyup,change事件），在相应的事件处理程序中，我们获取输入框的value并赋值给vm实例的text属性。我们会利用defineProperty将data中text设置为vm的访问器属性，因此给vm.text赋值，就会触发set方法。在set方法可主要做两件事，第一，更新属性的值，第二后面再说。
forvue {{ text }}
7. 订阅/发布模式(subscribe & publish)
text属性变化了，set方法触发了，但是文本节点的内容没有变化。如何才能让同样绑定到text的文本节点也同步变化呢？这里有一个知识点：订阅发布模式，订阅发布模式又称为观察者模式，定义一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有的观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作
// 一个发布者 publisher，功能就是负责发布消息 - publish
var pub = {
publish: function () {
dep.notify();
}
}
// 多个订阅者 subscribers， 在发布者发布消息之后执行函数
var sub1 = {
update: function () {
console.log(1);
}
}
var sub2 = {
update: function () {
console.log(2);
}
}
var sub3 = {
update: function () {
console.log(3);
}
}
// 一个主题对象
function Dep() {
this.subs = [sub1, sub2, sub3];
}
Dep.prototype.notify = function () {
this.subs.forEach(function (sub) {
sub.update();
});
}
// 发布者发布消息， 主题对象执行notify方法，进而触发订阅者执行Update方法
var dep = new Dep();
pub.publish();
不难看出，这里的思路还是很简单的： 发布者负责发布消息、 订阅者负责接收接收消息，而最重要的是主题对象，他需要记录所有的订阅这特消息的人，然后负责吧发布的消息通知给哪些订阅了消息的人。
所以，当set方法触发后做的第二件事情就是作为发布者发出通知： “我是属性text，我变了”。 文本节点作为订阅者，在接收到消息之后执行相应的更新动作。
8.双向绑定的实现
回顾一下，每当new一个vue,主要做了两件事情 ，第一监听数据:observe(data),第二是编译HTML， nodeToFragment(id)
在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。
在编译HTML的过程中，会为每一个数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。
我们已经实现了：修改输入框内容 => 在事件回调函数中修改属性值 => 触 发属性的set方法。
接下来我们要实现的是：发出通知dep.notify() => 触发订阅者update方法 => 更新视图。
这里的关键逻辑是：如何将watch添加到关联属性的dep中。
function observe(obj, vm) {
Object.keys(obj).forEach(function(key) {
defineReactive(vm, key, obj[key])
})
}
function defineReactive(obj, key, val) {
var dep = new Dep()
Object.defineProperty(obj, key, {
get: function() {
if (Dep.target) {
// 添加订阅者watcher到主题对象Dep
dep.addsub(Dep.target)
}
return val
},
set: function(newVal) {
if (newVal === val) {
return
} else {
val = newVal
// 作为发布者发出通知
dep.notify()
}
}
})
}
function Dep () {
this.subs = []
}
Dep.prototype = {
addsub: function(sub) {
this.subs.push(sub)
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update()
})
}
}
function compile(node, vm) {
var reg = /\{\{(.*)\}\}/
if (node.nodeType === 1) {
var attr = node.attributes
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName === 'v-model') {
var name = attr[i].nodeValue
node.addEventListener('input', function(e) {
vm[name] = e.target.value
})
node.value = vm[name]
node.removeAttribute('v-model')
}
}
}
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1
name = name.trim()
// node.nodeValue = vm[name]
new Watcher(vm, node, name)
}
}
}
function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment()
var child
while (child = node.firstChild) {
compile(child, vm)
flag.appendChild(child)
}
return flag
}
function Watcher(vm, node, name){
Dep.target = this
this.vm = vm
this.node = node
this.name = name
this.update()
Dep.target = null
}
Watcher.prototype = {
update: function() {
this.get()
this.node.nodeValue = this.value
},
get: function() {
this.value = this.vm[this.name]
}
}
function Vue(options) {
this.data = options.data
this.methods = options.methods
var data = this.data
var el = options.el
observe(data, this)
var dom = nodeToFragment(document.querySelector(el), this)
document.querySelector(el).appendChild(dom)
}
var vm = new Vue({
el: '#app',
data: {
text: 123
}
})
希望本文所述对大家vue.js程序设计有所帮助。
本文标题：vue中的双向数据绑定原理与常见操作技巧详解
文章分享：http://scyanting.com/article/jspjhe.html
