双向绑定

vue的双向绑定主要解决的问题：

vue是一种MVVM框架，双向绑定要实现view和view-model之前的数据绑定。view的改变->view-model的改变比较容易实现，例如监听dom的变化等。那么主要的问题就是实现view-model的改变->view。
view-model的改变需要一种类似监听器的机制。在js里面能够及时察觉数据属性变化的情况是这个属性本身是一个属性描述符，即有getter和setter。每次当属性“被赋值”时，相当于调用setter方法。所以需要在这个方法里面让view作出响应。

实现步骤

1、vue对象里面定义的data属性都需要监听。创建一个监听器用于监听属性的变化。
2、对于一个属性，可能有很多订阅者，所以在监听器里面需要创建一个该属性对应的订阅器，可用数组实现。
3、遍历需要监听的节点及其子节点，用正则匹配的方式（举例）找出指令绑定的节点，当找到指令后，即可创建一个订阅者，同时向订阅器中添加一个订阅者（在getter中执行添加，就可以用闭包的特性关联监听器和这一个属性，这里注意只有在创建订阅者时才添加，其他get操作需要过滤）
4、当属性变化时，监听函数内发送一条通知给订阅器，订阅器通知每个订阅者进行更新（调用创建订阅者时传入的回调函数（函数内容通过订阅者类型决定的）进行更新）

Vue双向绑定实现

2018年03月30日 16:26:54 阅读数：1385

昨天接到一个电话面试，上来第一个问题就是Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化，于是没答上来，挂电话后，我赶忙查了下资料，主要思路有如下三种。

1.发布者-订阅者模式（backbone.js）

思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。

2.脏值检查（angular.js）

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

XHR响应事件 ( $http )

浏览器Location变更事件 ( $location )

Timer事件( $timeout , $interval )

执行 $digest() 或 $apply()

3.数据劫持（Vue.js）

思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

var obj = {};
    Object.defineProperty(obj, 'hello', {
        get: function() {
            console.log('get val:'+ val);
            return val;
     　 },
    　　set: function(newVal) {
            val = newVal;
            console.log('set val:'+ val);
        }
    });
obj.hello='111';//控制台打印set val:111
obj.hello; //控制台打印get val:111

当获取hello属性时，触发get；设置hello值时，触发set；这就是vue实现双向绑定的核心

完整代码如下

<!DOCTYPE html>

<head>

<title>v-model</title>

</head>

<body>

<h2>{{title}}</h2>

<button v-on:click='clickMe'>click me</button>

</div>

//Dom类解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图

//并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

class Doms {

constructor(node, vm) {

if (node) {

this.$frag = this.nodeToFragment(node, vm)

return this.$frag

}

nodeToFragment(node, vm) {//将dom转换成fragment

var frag = document.createDocumentFragment()

var child;

while (child = node.firstChild) {

this.compileElement(child, vm)

frag.appendChild(child)

}

return frag

}

compileElement(node, vm) {//获取v-model属性,给dom赋值

var reg = /\{\{(.*)\}\}/ //匹配双括号里面的任何字符

if (node.nodeType === 1) {//element元素

var attr = node.attributes;

for (var i = 0; i < attr.length; i++) {

if (attr[i].nodeName == 'v-model') {

var name = attr[i].nodeValue//获取绑定的key

node.addEventListener('input', function (e) {

vm[name] = e.target.value//触发set方法

})

new Watcher(vm, node, name, 'value')

} else if (attr[i].nodeName.includes(':')) {

var eventType = attr[i].nodeName.split(':')[1]//事件名

var cb = vm.methods && vm.methods[attr[i].nodeValue]

if (eventType && cb) {

node.addEventListener(eventType, cb.bind(vm), false)

}

if (node.childNodes && node.childNodes.length) {//如果还有子节点递归

[...node.childNodes].forEach(n => this.compileElement(n, vm))

}

if (node.nodeType === 3) {//text

if (reg.test(node.nodeValue)) {

var name = RegExp.$1

name = name.trim()

new Watcher(vm, node, name, 'nodeValue')

}

class Vue {//Vue类

constructor(params) {

this.data = params.data //获取属性

this.methods = params.methods //获取方法

this.observe(params.data, this)//监听属性

var id = params.el;

var dom = new Doms(document.getElementById(id), this)

document.getElementById(id).appendChild(dom)

params.mounted.call(this)

}

observe(obj, vm) {//读取data内属性，并监听

if (!obj || typeof obj !== 'object') return

Object.keys(obj).forEach(key => this.defineReactive(vm, key, obj[key]))

}

defineReactive(obj, key, val) {//利用Object.defineProperty监听属性改变

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

val = newVal

console.log(val)

//作为发布者发布通知

dep.notify()

}

})

}

class Dep {//收集订阅者的容器类

constructor() {

this.subs = []

}

addSub(sub) {

this.subs.push(sub)

}

notify() {

this.subs.forEach(sub => sub.update())

}

class Watcher {

constructor(vm, node, name, type) {

Dep.target = this

this.name = name

this.node = node

this.vm = vm

this.type = type

this.update()

Dep.target = null

}

update() {

this.get()

this.node[this.type] = this.value//订阅者执行响应操作

}

get() {

this.value = this.vm[this.name]//触发响应属性的get

}

var vm = new Vue({

el: 'app',

data: {

text: 'lyl',

title: 'hello world'

methods: {

clickMe() {

this.title = 'hello world'

}

mounted() {

setTimeout(() => {

this.title = '你好'

}, 1000);

}

})

</script>

</body>

</html>

GitHub地址：https://github.com/ChrisLuckComes/Vue2WayBind

双向绑定

双向绑定

Vue双向绑定实现

Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

相关推荐

Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。