手写简单的双向数据绑定

github.com/logictuLuoq…

简单介绍一下MVVM

MVVM是Model-View-ViewModel的简写 MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了

还是听不懂简单一点

你控制 Model(数据)
写vue 全在控制数据
View(模板)
你就理解成你写的templeat
ViewModel这东西叫vue

手写双向数据绑定是什么东西

我们还记得react是这么操作的吗

setData()累吧

vue采用的是双向数据绑定是什么呢 this.data简单吧

我们看里面的原理

我写完了双向数据绑定应为中文名的原因取名为mvvm

跑起来项目

    git clone https://github.com/logictuLuoqi/Practicecd MVVMnpm install serveserve .
复制代码

就跑起来了为什么要用 serve 是这样的本次代码采用 ES6的模块化

我写代码的过程

首先写调用

    <div id="app"><input type="text" id="a" v-model="text">{{ text }}</div>
复制代码

之后可以参照文章的 type ES6模块化

去写 MVVM的js

    new Vue({el: 'app',data: {text: 'Hello Vue!'}})
复制代码

入口看完后我们来看方法

    observer(data, this);const dom = new Compile(document.querySelector(`#${el}`), this);
复制代码

针对于这两个点做一下解释

observer

我去这个名字也知道做什么了双向数据绑定这里采用 defineProperty

github.com/logictuLuoq…

帮助理解observer中的defineProperty

    get() {if (Dep.target) {dep.addSub(Dep.target);}return val;},set(newVal) {if (newVal === val) return;val = newVal;dep.notify();},
复制代码

这里的 Dep.target后续介绍

dep.notify();后续解释

Compile

我在这里写的是createDocumentFragment 来代替虚拟dom这东西后面介绍虚拟dom

    const frag = document.createDocumentFragment()return frag;
复制代码

写正则匹配 {{里面的全部}}

    const reg = /\{\{(.*)\}\}/;
复制代码

来查找到DOM节点上有这个属性的

    if(node.nodeType === 3){if(reg.test(node.nodeValue)){let name = RegExp.$1;name = name.trim();new Watcher(vm, node, name, 'nodeValue');}}
复制代码

寻找input

    for(let i = 0; i < attributes.length; i++){if(attributes[i].nodeName == 'v-model'){const { nodeValue } = attributes[i];node.addEventListener('input', function(e){vm[nodeValue] = e.target.value;})new Watcher(vm, node, nodeValue, 'value');}}
复制代码

Watcher

    export default function Warcher(vm, node, name, type) {Dep.target = this;this.name = name;this.node = node;this.vm = vm;this.type = type;this.update();Dep.target = null;}
复制代码

Dep.target 你们发现了什么

往下看

    Warcher.prototype.update = function () {this.get();const batcher = new Batcher();batcher.push(this)};Warcher.prototype.cb = function () {this.node[this.type] = this.vm.text;};Warcher.prototype.get = function ()  {this.node[this.type] = this.vm[this.name];};
复制代码

是不是丢失的都找到了呀

Dep.target

update()

那么Dep是什么鬼

Dep

    export default function Dep(){this.subs = [];}Dep.prototype.addSub = function (sub) {this.subs.push(sub);}Dep.prototype.notify = function () {this.subs.forEach((sub) => {sub.update();});}复制代码

就是这么说把

    export default function Dep(){this.subs = [Dep.target，Dep.target，Dep.target];}
复制代码

    Dep.prototype.notify = function () {this.subs.forEach((sub) => {sub.update(); ==== Dep.target.update();});}
复制代码

这样结合上面的双向数据绑定解释