【Vue源码解析】vue工作机制虚拟dom编译机制数据监听

Vue 源码解析

Vue 的工作机制

在 new vue() 之后，Vue 会调用进行初始化，会初始化生命周期、事件、props、methods、data、computed和watch等。其中最重要的是通过Object.defineProperty设置setter和getter，用来实现响应式和依赖收集。

初始化之后，调用 $mount 挂载组件。

启动编译器compile()，对template进行扫描，parse、optimize、generate，在这个阶段会生成渲染函数或更新函数，render function，生成虚拟节点数，将来我们改变的数据，并不是真的DOM操作，而是虚拟DOM上的数值。

在更新前，会做一个diff算法的比较，通过新值和老值的比较，计算出最小的DOM更新。执行到patch()来打补丁，做界面更新，目的是用JS计算的时间换DOM操作的时间。因为页面渲染很耗时间，所以vue的目的就是减少页面渲染的次数和数量。

render function除了编译渲染函数以外，还做了一个依赖搜集（界面中做了很多绑定，如何知道和数据模型之间的关系）。当数据变化时，该去界面中更新哪个数据节点。通过观察者watcher()来调用更新函数patch()

编译

编译模块分为三个阶段

1. parse 使用正则解析template中vue的指令变量等，形成语法树AST
2. optimize 标记一些静态节点，用作后面的性能优化，在diff的时候直接略过
3. generate 把第一步生成的AST转化为渲染函数render function

响应式

vue 核心内容

初始化的时候通过defineProverty进行绑定，设置通知机制，当编译生成的渲染函数被实际渲染时，会触发getter进行依赖收集，在数据变化时，通过setter进行更新。

虚拟DOM

virtual DOM 是react首创，Vue2开始支持，用js对象来描述DOM结构，数据修改的时候，先修改虚拟DOM中的数据，然后数组做diff，最后再汇总所有的diff，力求做最少的dom操作，毕竟js里对比很快，而真实的dom操作太慢。

{
tag: 'div',
  props: {
    name: 'xx',
    style: {color: red},
    onClick: xx
  },
  children: [{
    tag: 'a',
    text: 'click me'
  }]
}

<div name="xx" style="color: red" @click="xx">
  <a>click me</a>
</div>

更新视图

数据修改触发setter，然后监听器会通知进行修改，通过对比两个DOM树，得到改变的地方，就是patch，只需要把这些差异修改即可。

Vue2响应式的原理： defineProperty

<div id="app"><div id="name"></div></div>
  <script>
let obj = {}
Object.defineProperty(obj, 'name', {
      get: function() {
        return document.querySelector('#name').innerHTML
      },
      set: function(val) {
        document.querySelector('#name').innerHTML = val
      }
    })
    obj.name='adela'
  </script>

描述vue数据绑定的原理

利用了Object.defineProperty这个属性，将data中的每一个属性，都定义了getter和setter，去监听这些属性的变化，当某些属性变化时，我们可以通知需要更新的地方去更新。[数据劫持]

实现数据响应式

监听Observe

增加了一个Dep类，用来搜集Watcher对象。

读数据的时候，会触发getter函数把当前的Watcher对象（存放在Dep.target中）搜集到Dep类中去。

写数据的时候，则会触发setter方法，通知Dep类调用notify来触发所有watcher对象的update方法更新对应视图。

编译Compile

核心逻辑获取DOM，遍历DOM，获取{{}}格式的变量，以及每个DOM的属性，截获k-和@开头的设置响应式。

检查点

• vue编译过程是怎么样的 vue写的模板语句，HTML不识别，通过编译的过程，进行依赖搜集，data中的数据模型和视图进行了绑定，如果模型发生变化，会通知依赖的地方进行更新，这就是执行编译的目的。模型驱动视图。
• 双向绑定的原理是什么 v-model 的指令放在input上，在编译时，可以解析出v-model。操作时做了两件事情，一，在当前v-model所属的元素上加了一个事件监听，v-model指定的事件回调函数当做input事件回调函数去监听，当input发生变化时，就将值更新到vue实例上。二、vue实例已经实现了数据的响应化，setter函数会触发界面中所有依赖的更新。

知识点

let fragment = document.createDocumentFragment();

fragment 是一个指向空DocumentFragment对象的引用。

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

代码

kvue.js文件

class KVue {
constructor(options) {
this.$options = options
this.$data = options.data
this.observe(this.$data)
    new Compile(options.el, this)
    if (options.created) {
      options.created.call(this)
    }
  }
observe(value) {
    if (!value || typeof value !== 'object') {
      return
    }
Object.keys(value).forEach(key => {
      this.defineReactive(value, key, value[key])
// 代理data中的属性到vue实例上
      this.proxyData(key)
    })
  }
  defineReactive(obj, key, val) {
    this.observe(val) // 递归解决数据嵌套
    const dep = new Dep() // 初始化dependence
    Object.defineProperty(obj, key, {
      get() {
        Dep.target && dep.addDep(Dep.target)
        return val
      },
      set(newVal) {
        if (newVal == val)
          return
        val = newVal
        console.log(`${key}属性更新了：${val}`)
        dep.notify()
      }
    })
  }
  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key]
      },
      set(newVal) {
        this.$data[key] = newVal
      }
    })
  }
}
// Dep: 用来管理watcher对象。
// 读数据的时候，会触发getter函数，把当前的Watcher对象（存放在Dep.target中）搜集到Dep类中去。
// 写数据的时候，会触发setter方法，通知Dep类调用notify来触发所有watcher对象的update方法更新对应视图。
class Dep {
  constructor() {
    //  这里存放若干依赖（watcheer）
    this.deps = []
  }
  addDep(dep) {
    this.deps.push(dep)
  }
  notify() {
    // 通知所有的依赖去做更新
    this.deps.forEach(dep => dep.update())
  }
}
// Wathcer  
class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm
    this.key = key
    this.cb = cb
    // 将当前watcher实例制定到Dep静态属性target
    Dep.target = this
    this.vm[this.key] // 触发getter, 添加依赖
    Dep.target = null
  }
  update() {
    console.log(`属性更新了`)
    this.cb.call(this.vm, this.vm[this.key])
  }
}

compile.js文件

class Compile {
constructor(el, vm) {
// 要遍历的宿主节点
this.$el = document.querySelector(el)
    this.$vm = vm
    // 编译
    if (this.$el) {
      // 转换内部内容为片段fragment
      this.$fragment = this.node2fragment(this.$el)
      // 执行编译
      this.compile(this.$fragment)
      // 将编译完的HTML结果追加至$el
      this.$el.appendChild(this.$fragment)
    }
  }
  // 将宿主元素中代码片段拿出来遍历，比较高效
node2fragment(el) {
    const frag = document.createDocumentFragment()
    // 将el中的所有子元素搬家至frag中
    let child
    while ((child = el.firstChild)) {
      frag.appendChild(child)
    }
    return frag
  }
  // 编译过程
compile(el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 判断类型
      if (this.isElement(node)) {
        // 元素
        // console.log('编译元素' + node.nodeName)
        const nodeAttrs = node.attributes
        Array.from(nodeAttrs).forEach(attr => {
          const attrName = attr.name // 属性名
          const exp = attr.value // 属性值
          if (this.isDirective(attrName)) {
            // k-text
            const dir = attrName .substring(2)
            this[dir] && this[dir](node, this.$vm, exp)
          } else if (this.isEvent(attrName)) {
            let dir = attrName.substring(1)
            this.eventHandler(node, this.$vm, exp, dir)
          }
        })
      } else if (this.isInterpolation(node)) {
        // 文本
        // console.log('编译文本' + node.textContent)
        this.compileText(node)
      }
      // 递归子节点
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }
  compileText(node) {
    // console.log(RegExp.$1)
    this.update(node, this.$vm, RegExp.$1, 'text')
  }
  // 更新函数
  update(node, vm, exp, dir) {
    const updaterFn = this[dir + 'Updater']
    // 初始化
    updaterFn && updaterFn(node, vm[exp])
    // 依赖收集
    new Watcher(vm, exp, function(value) {
      updaterFn && updaterFn(node, value)
    })
  }
  text(node, vm, exp) {
    this.update(node, vm, exp, 'text')
  }
  // 事件处理器
  eventHandler(node, vm, exp, dir) {
    let fn = vm.$options.methods && vm.$options.methods[exp]
    if (dir && fn) {
      node.addEventListener(dir, fn.bind(vm))
    }
  }
  html(node, vm, exp) {
    this.update(node, vm, exp, 'html')
  }
  // 双向绑定
  model(node, vm, exp) {
    // 指定input的value属性
    this.update(node, vm, exp, 'model')
    // 视图对模型响应
    node.addEventListener('input', e => {
      vm[exp] = e.target.value
    })
  }
  modelUpdater(node, value) {
    node.value = value
  }
  textUpdater(node, value) {
    node.textContent = value
  }
  htmlUpdater(node, value) {
    node.innerHTML = value
  }
  isDirective(attr) {
    return attr.indexOf('k-') == 0
  }
  isEvent(attr) {
    return attr.indexOf('@') == 0
  }
  isElement(node) {
    return node.nodeType === 1
  }
  isInterpolation(node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }
}

index.html文件

<body>
  <div id="app">
    <p>{{name}}</p>
    <p k-text="name"></p>
    <p>{{age}}</p>
    <p> {{doubleAge}} </p> 
    <input type="text" k-model="name"> 
    <button @click="changeName">click me</button>
    <div k-html="html"></div>
  </div>
  <script src='./compile.js'></script>
  <script src='./kvue.js'></script>
  <script>
let xx = new KVue({
      el: '#app', 
      data: { 
        name: "I am test.", 
        age: 12, 
        html: '<button>这是一个按钮</button>' 
      }, 
created() {
console.log('开始啦')
        setTimeout(() => {
          this.name = '我是测试'
        }, 1500)
      }, methods: {
changeName() {
          this.name = '哈喽，嘻嘻嘻'
          this.age = 1
          this.id = 'xx'
          console.log(1, this)
        }
      }
    }) 
  </script>
</body>