vue数据双向绑定的实现原理

读某博客有感

在初始化中，将data对象代理到vm实例上，同时为data添加监听对象

一、访问器属性

通过Object.defineProperty的get和set方法实现对象属性的修改和读取

1、当读取对象属性的时候，就会调用get方法并返回get方法的返回值

2、当给对象属性赋值的时候，就会调用set方法，赋值其实相当于传参

二、极简双向绑定的实现

给input添加keyup事件，每次触发就会重新给对象属性赋值，，然后在set函数内部，再把属性值插入到dom中

三、分解任务

那么在vue里，在{{}}里的数据是如何双向绑定的呢？

首先分解任务：

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

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

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

我说下简单的实现思路

任务一：把Vue挂载到的dom节点的所有子节点劫持到DocumentFragment，这里有一个知识点：DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。经过一番处理之后，再把整个DocumentFragment 整体返回插入挂载目标。

子节点劫持之后，遍历所有子节点，用正则表达式去匹配{{}}里的变量，如果匹配到的话，就把data里的data[变量]赋值给给nodeValue，这是modle到view的绑定。

再说view到model的绑定，当某个input被添加v-model属性后，再遍历所有子节点，匹配到该v-model属性后，给该属性添加事件，获取到该input的值，再赋值给data[变量]。

理解订阅发布模式：

订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

每当 new 一个 Vue，主要做了两件事：第一个是监听数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。

转载于:https://juejin.im/post/5b72e440f265da2818660b85