四、vue源码（简化版） ---kkb

知识要点

• vue工作机制
• vue响应式原理
• 依赖收集与追踪
• 编译compile

Vue工作机制

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

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

简化版：

编译

编译模块分为三个阶段

1、parse：使用正则解析template中的vue指令（v-xxx）变量等等，形成抽象语法树AST

2、optimize：标记一些静态节点，用作后面的性能优化，在diff的时候直接略过

3、generate：把第一步生成的AST转化为渲染函数 render function

响应式

这一块是vue最核心的内容，初始化的时候通过defineProperty定义对象getter、setter，设置通知机制

当编译生成的渲染函数被实际渲染的时候，会触发getter进行依赖收集，在数据变化的时候，触发setter进行更新

虚拟dom

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

更新视图

数据修改触发setter，然后监听器会通知进行修改，通过对比新旧vdom树，得到最小修改，就是patch，然后只需要把这些差异修改即可

Vue2响应式原理：Object.defineProperty

实现 KVue：

// 定义KVue的构造函数
class KVue {
  constructor(options) {
    // 保存选项
    this.$options = options

    // 传入data
    this.$data = options.data

    // 响应化处理
    this.observe(this.$data)

    // 测试代码
    // new Watcher(this, 'foo')
    // this.foo
    // new Watcher(this, 'foo.bar.mua')
    // this.bar.mua

    // 测试编译器
    new Compile(options.el, this)

    if(options.created) {
      options.created.call(this)
    }
  }

  observe(value) {
    // 如果value不存在，或者value不是对象，就直接return
    // 这里不对数组进行处理
    if (!value || Object.prototype.toString.call(value) !== '[object Object]') {
      return
    }
    // 遍历value
    Object.keys(value).forEach(key => {
      // 响应式处理
      this.defineReactive(value, key, value[key])
      // 代理data中的属性到vue根上
      this.proxyData(key)
    })
  }

  defineReactive(obj, key, val) { // 这里实质上就是一个闭包，内部的get和set一直使用的是这里的val
    this.observe(val) // 如果是对象的话，进一步递归

    // 定义了一个Dep
    const dep = new Dep() // 每个dep实例和data中每个key有一对一关系

    // 给obj的每一个key定义拦截
    Object.defineProperty(obj, key, {
      get() {
        // 依赖收集
        Dep.target && dep.addDep(Dep.target)
        return val
      },
      set(newVal) {
        if (newVal !== val) {
          val = newVal
          // console.log(key + '属性更新了')
          dep.notify() // 通知
        }
      }
    })
  }

  // 在vue根上定义属性代理data中的数据
  proxyData(key) {
    // this指的是KVue的实例
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key]
      },
      set(newVal) {
        this.$data[key] = newVal
      }
    })
  }
}

// 创建Dep：管理所有的Watcher（观察订阅模式）
class Dep {
  constructor() {
    // 存储所有依赖
    this.watchers = []
  }
  addDep(watcher) {
    this.watchers.push(watcher)
  }
  notify() {
    this.watchers.forEach(watcher => watcher.update())
  }
}

// 创建Watcher：保存data中数值和页面中的挂钩关系
class Watcher {
  constructor(vm, key, cb) { // 某个组件中的某个key
    // 创建实例时立刻将该实例指向Dep.target，便于依赖收集
    Dep.target = this
    this.vm = vm
    this.key = key
    this.cb = cb

    Dep.target = this
    this.vm[this.key] // 读一下，触发依赖收集
    Dep.target = null
  }
  // 更新
  update() {
    // console.log(this.key + '更新了！！！')
    this.cb.call(this.vm, this.vm[this.key])
  }
}

编译compile

核心任务：

1、获取并遍历DOM树

2、文本节点：获取 {{}} 格式的内容并解析

3、元素节点：访问节点特性，截获 k- 和 @开头内容并解析

// 遍历dom结构，解析指令和插值表达式
class Compile {
  // el:待编译模板  vm:KVue实例
  constructor(el, vm) {
    this.$vm = vm
    this.$el = document.querySelector(el)

    // 把模板中的内容移到片段中操作
    this.$fragment = this.node2Fragment(this.$el)
    // 执行编译
    this.compile(this.$fragment)
    // 放回$el中
    this.$el.appendChild(this.$fragment)
  }

  node2Fragment(el) {
    // 创建片段：游离于dom文档之外，做修改的话不会让文档刷新
    const fragment = document.createDocumentFragment()
    let child
    while (child = el.firstChild) {
      fragment.appendChild(child)
    }
    return fragment
  }

  compile(el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      if (node.nodeType === 1) {
        // 元素
        // console.log('编译元素' + node.nodeName)
        this.compileElement(node)
      } else if (this.isInter(node)) { // 判断是否是文本节点
        // 只关心{{xxx}}的文本节点
        // console.log('编译插值文本' + node.textContent)
        this.compileText(node)
      }

      // 递归子节点
      if (node.children && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }

  isInter(node) {
    return node.nodeType === 3 && /{{(.*)}}/.test(node.textContent)
  }

  // 文本替换
  compileText(node) {
    // console.log(RegExp.$1)

    // 表达式
    const exp = RegExp.$1
    this.update(node, exp, 'text') // v-text
    // node.textContent = this.$vm[RegExp.$1]
  }

  update(node, exp, dir) {
    const updator = this[dir + 'Updator']
    updator && updator(node, this.$vm[exp])
    // 创建Watcher实例，依赖收集完成了
    new Watcher(this.$vm, exp, function (value) {
      updator && updator(node, value)
    })
  }

  textUpdator(node, value) {
    node.textContent = value
  }

  compileElement(node) {
    // 关心属性
    const nodeAttrs = node.attributes
    Array.from(nodeAttrs).forEach(attr => {
      // 规定：k-xxx="yyy"
      const attrName = attr.name // k-xxx
      const exp = attr.value // yyy
      if (attrName.indexOf('k-') === 0) {
        // 指令
        const dir = attrName.substring(2) // xxx
        // 执行
        this[dir] && this[dir](node, exp)
      }
    })
  }

  text(node, exp){
    this.update(node, exp, 'text')
  }
}

测试代码：

<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">呵呵</button>
    <div k-html="html"></div>
  </div>
  <script src='./compile.js'></script>
  <script src="./kvue.js"></script>
  <script>
    const app = new KVue({
      el: '#app',
      data: {
        name: "I am test.",
        age: 12,
        html: '<button>这是⼀一个按钮</button>'
      },
      created() {
        console.log('开始啦')
        setTimeout(() => {
          this.name = '我是测试'
          console.log('结束啦')
        }, 1500)
      },
      methods: {
        changeName() {
          this.name = '哈喽，开课吧'
          this.age = 1
        }
      }
    })
  </script>
</body>

v-html指令

html(node, vm, exp) {
  this.update(node, vm, exp, 'html')
}
htmlUpdator(node, value) {
  node.innerHTML = value
}

v-model指令

model(node, vm, exp) {
  this.update(node, vm, exp, 'model')

  node.addEventListener('input', e => {
    vm[exp] = e.target.value
  })
}

modelUpdator(node, value) {
  node.value = value
}

事件监听

compileElement(node) {
  // 关心属性
  const nodeAttrs = node.attributes
  Array.from(nodeAttrs).forEach(attr => {
    // 规定：k-xxx="yyy"
    const attrName = attr.name // k-xxx
    const exp = attr.value // yyy
    if (attrName.indexOf('k-') === 0) {
      // 指令
      const dir = attrName.substring(2) // xxx
      // 执行
      this[dir] && this[dir](node, exp)
    }

    // 事件处理
    if(attrName.indexOf('@') === 0) {
      const dir = attrName.substring(1) // 事件名称
      // 事件监听处理
      this.eventHandler(node, this.$vm, exp, dir)
    }
  })
}

// 事件处理：给node添加事件监听，dir-事件名称
// 通过vm.$options.methods[exp]可获得回调函数
eventHandler(node, vm, exp, dir) {
  let fn = vm.$options.methods && vm.$options.methods[exp]
  if (dir && fn) {
    node.addEventListener(dir, fn.bind(vm))
  }
}