跟随大神实现简单的Vue框架

自己用vue也不久了，学习之初就看过vue实现的原理，当时看也是迷迷糊糊，能说出来最基本的，但是感觉还是理解的不深入，最近找到了之前收藏的文章，跟着大神一步步敲了一下简易的实现，算是又加深了理解。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    {{name}}

    <p v-if="isShow">

      <span>{{name}}</span>

    </p>

    <input type="text" id="a" v-model="name">

  </div>

  <script>

    function compile(node, vm) {

      var reg = /\{\{(.*)\}\}/;

      if (node.nodeType === 1) {

        var attr = Array.prototype.slice.call(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;

              //eval(`vm.data.${name}=e.target.value`)

              console.log(vm)

            })

            node.value = eval(`vm.${name}`);

            node.removeAttribute('v-model');

          }

          if (attr[i].nodeName == 'v-if') {// 这里是我自己加的指令，真正肯定不是这样玩的吧

            var name = attr[i].nodeValue;

            var isInsert = eval(`vm.${name}`);

            if (!isInsert) {

              node = '';

              return node;

            } else {

              node.removeAttribute('v-if');

            }

          }

        }

      }

      if (node.nodeType === 3) {

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

          var name = RegExp.$1;

          name = name.trim();

          //node.nodeValue = eval(`vm.data.${name}`);

          new Watcher(vm, node, name)//这里给每个属性文本节点生成一个Watcher对象，嗯，大致跟vue的原理相似

        }

      }

      return node;

    }

    function nodeToFragment(node, vm) {

      var flag = document.createDocumentFragment();

      var child;

      while (child = node.firstChild) {

        child = compile(child, vm)

        if (child !== "") {

          if (child.childNodes.length != 0) {

            child.append(nodeToFragment(child, vm));

          }

        } else {

          node.removeChild(node.firstChild)

        }

        flag.append(child);

      }

      return flag;

    }

    function defineReactive(obj, key, val) {

      var dep = new Dep();//这里给每个属性生成一个数据订阅中心，它可以存储订阅它的所有watcher,

      Object.defineProperty(obj, key, {

        get: function () {

          if (Dep.target) dep.addSub(Dep.target);//这里的Dep.target是对应的Watcher对象，这里是dep对象调用addSub，我看别人说的vue源码是在Watcher对象实现addSub操作的

          return val;

        },

        set: function (newVal) {

          if (newVal === val) return;

          console.log('修改了', key)

          val = newVal;

          dep.notify();//数据更新了，就通知所有的观察者实例

        }

      })

    }

    function observer(obj, vm) {

      Object.keys(obj).forEach(function (key) {

        defineReactive(vm, key, obj[key]);

      })

    }

    function Watcher(vm, node, name) {

      Dep.target = this;//在实例化新的watcher对象时把Dep.target赋值为this，也就是每个指令对应的那个watcher对象，这样在下面调用this.update,从而调用this.get时触发数据的get方法，从而触发dep.addSub（Dep.target）,这样这个watcher就被添加进去

      this.name = name;

      this.node = node;

      this.vm = vm;

      this.update();

      Dep.target = null;//为了保证全局只有一个，在最后需要清空，为下一个指令做准备

    }

    Watcher.prototype = {

      update: function () {

        this.get();//更新时调用get()

        this.node.nodeValue = this.value;

      },

      get: function () {

        this.value = this.vm[this.name]; //会触发vm.data中属性的get方法，进而可以添加watcher到Dep中

      }

    }

    function Dep() {

      this.subs = [];

    }

    Dep.prototype = {

      addSub: function (sub) {

        this.subs.push(sub);

      },

      notify: function () {

        this.subs.forEach(function (sub) {

          sub.update();

        })

      }

    }

    function Vue(options) {

      this.data = options.data;

      var id = options.el;

      var data = this.data;

      observer(data, this)

      var dom = nodeToFragment(document.getElementById(id), this);

      document.getElementById(id).appendChild(dom);

    }

    var vm = new Vue({

      el: 'app',

      data: {

        text: {

          name: 'jay'

        },

        'name': 'zxf',

        isShow: true

      }

    })

  </script>

</body>

</html>

　　以上的备注是我看了文章后自己的一些理解，这个得简单实现跟vue的源码好像是有区别，比如

function defineReactive(obj, key, val) {

    var dep = new Dep()

    var childOb = Observer.create(val)

    Object.defineProperty(obj, key, {

        enumerable: true,

        configurable: true,

        get: function metaGetter() {

            // 如果Dep.target存在，则进行依赖收集

            if (Dep.target) {

                dep.depend()

                if (childOb) {

                    childOb.dep.depend()

                }

            }

            return val

        },

        set: function metaSetter(newVal) {

            if (newVal === val) return

            val = newVal

            childOb = Observer.create(newVal)

            dep.notify()

        }

    })

}

Watcher.prototype.addDep = function (dep) {

    var id = dep.id

    if (!this.newDeps[id]) {

        this.newDeps[id] = dep

        if (!this.deps[id]) {

            this.deps[id] = dep

            dep.addSub(this)

        }

    }

}

作者：百度外卖大前端技术团队

链接：https://juejin.im/post/5a44b15e51882538fe631406

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

　源码中在dep的get里面并没有直接调用addsub，而是调用

dep.depend();

而dep.depend() 实际执行了 Watcher.addDep() 

这样最终是在Watcher对象的方法里面实现了增加订阅者，感觉好像是订阅者主动要求dep添加自己，而简易框架是，dep主动添加，感觉都差不多吧。，可能原文作者为了方便，而vue可能处于更全面的考虑吧

另外我也懂了vue原理中watcher,dep,observer，compile等这几个对象的概念和他们之间的关系，observer是数据观察者，主要是劫持data数据，添加set，get,并观察数据的变动，若触发了set,就调用dep的notify方法，若触发了get,就会新增watcher到dep的存放观察者的数组中。

另外这个图片也可以说明一切，终于看懂了，以前知道这么连接，只是不知道为什么这么连接的，另外还有一篇文章是讲解关于这幅图的理解的那个是对源码进行解读的，比较详细

vue源码解读，另外还有一篇文章也是大牛自己实现vue的简易框架的，与这个得实现思路略微有所不同：vue简易框架2

巴特西

跟随大神实现简单的Vue框架

最新文章

热门文章