Vue2高级原理

<div id="app">

    <input type="text" v-model="username">

    {{username}}

</div>

<script>

function Watcher (vm, node, name, nodeType) {

  this.name = name;

  this.node = node;

  this.vm = vm;

  this.nodeType = nodeType;

  this.update = function() {

    if (this.nodeType == 'text') {

      this.node.nodeValue = this.vm.$data[this.name];

    }

    if (this.nodeType == 'input') {

      this.node.value = this.vm.$data[this.name];

    }

  }

  Dep.target = this;

}

// 主播

function Dep () {

  this.subs = []

  this.addSub = function(sub) {

    this.subs.push(sub);

  },

  this.notify = function() {

    console.log(this.subs)

    this.subs.forEach(function(sub) {

      sub.update();

    });

  }

}

// 保存的所有粉丝

let watchers = [];

function observer(vm)

{

    Object.keys(vm.$data).forEach(key => {

        let dep = new Dep() // 创建主播

        let value = vm.$data[key]

        Object.defineProperty(vm.$data, key,{

            get(){

                // 代码：添加订阅者 watcher 到主题对象 Dep

              // 生活：给主播添加粉丝

              dep.addSub(Dep.target)

              return value;

            },

            set(newValue){

              if(newValue === value) return

              value = newValue

              // 明确：模型中的数据就是主播

              // 然后：视图中使用模型数据就是一个个粉丝

              // 生活中：主播开播 - 通知粉丝进入直播间 弹框提示

              // 代码中：主播更新 - 通知粉丝页面同步显示最新数据

              // 留心：所有节点都遍历性能差

            //   watchers.forEach(watcher=>{

            //       if (watcher.nodeType == 'text') {

            //           watcher.node.nodeValue = watcher.vm.$data[watcher.name]

            //       }

            //       if (watcher.nodeType == 'input') {

            //           watcher.node.value = watcher.vm.$data[watcher.name]

            //       }

            //   })

            dep.notify();

            }

        })

    })

}

//编译解析指令

function compile(node, vm)

{

  let reg = /\{\{(.*)\}\}/g  //正则匹配页面指令

  //元素节点  nodeName 获取标签名、nodeType获取类型

  if(node.nodeType === 1)

  {

    let attr = node.attributes;

    //解析节点的属性

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

    {

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

      {

        let name = attr[i].nodeValue     //  v-model="username" 获取这里面的username

        new Watcher(vm, node, name, 'input')  // 切记：留心位置，因为创建好了之后，下面刚好触发直播get   这样就可以让当前粉丝和主播绑定

        node.value = vm.$data[name]      //  将【对应的】模型数据  给标签的value属性

        node.removeAttribute('v-model'); //  解析完毕不要出现vue指令

        //-------------------------------

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

          vm.$data[name] = e.target.value;

        });

        //--------------------------------------------

        //--------------------------------------------

        // 保存粉丝

        // 目的：M到V

        // 代码：node.value = vm.$data[name] // name username

        // watchers.push({ node:node, name: name, nodeType: 'input', vm:vm })

        //--------------------------------------------

      }

    }

  }

  //如果节点类型为text

  if(node.nodeType === 3)

  {

    if(reg.test(node.nodeValue))

    {

      let name = RegExp.$1;//获取匹配到的字符串（注：这句话非常复杂，你想看到得单独找我要视频  

      name = name.trim();  // 面试题js如何取空格  let str = ' a b '    trim, trimLeft, trimRight

                           // str.replace(/\s/g, '')  

                           // function trimAll(data) { return data.replace(/\s/g, '')  }

        new Watcher(vm, node, name, 'text');   // 切记：留心位置

      node.nodeValue = vm.$data[name];

      // ---------------------------

        // 保存粉丝

        // 目的：M到V

        // 代码：node.nodeValue = vm.$data[name] // name username

        // watchers.push({ node:node, name: name, nodeType: 'text', vm:vm })

      // ---------------------------

    }

  }

}

function Vue(options)

{

  //初始化

  this.$el = document.querySelector(options.el)

  this.$data =options.data

    //监听模型数据变化（观察所有模型数据读写操作

    observer(this)

  // 1 剪切到内存，2 剪切过中挨个过滤 将vue模板语法 解析为真实的数据

  //将挂载目标劫持 -> 存到节点容器中（数据处理） -> 再放到挂载目标中

  let flag = document.createDocumentFragment()

  let child

  // let dom = document.querySelector(el);

  let dom = this.$el

  while(child = dom.firstChild){

    compile(child, this)    //挂载目标中的节点挨个过滤（解析指令）

    flag.appendChild(child) //放到DocumentFragment页面渲染就不会显示/劫持

  }

  dom.appendChild(flag)//将DocumentFragment放到挂载目标中

}

let vm = new Vue({

  el:'#app',

  data:{

    username:'webopenfather',

    age: 5

  }

})

</script>