/** * @param {*} obj  目标对象 * @param {*} key  目标对象的一个属性 * @param {*} val  目标对象的一个属性的初始值 */function defineReactive(obj, key, val) {  // 通过该方法拦截数据  Object.defineProperty(obj, key, {    // 读取数据的时候会走这里    get() {      console.log('🚀🚀~ get:', key);      return val    },    // 更新数据的时候会走这里    set(newVal) {      // 只有当新值和旧值不同的时候 才会触发重新赋值操作      if (newVal !== val) {        console.log('🚀🚀~ set:', key);        val = newVal        // 这里是触发视图更新的地方        update()      }    }  })}复制代码

// html<div id='app'>123</div>
// js// 劫持 obj.foo 属性const obj = {}defineReactive(obj, 'foo', '')
// 给 obj.foo 一个初始值obj.foo = new Date().toLocaleTimeString()
// 定时器修改 obj.foosetInterval(() => {  obj.foo = new Date().toLocaleTimeString()}, 1000)
// 更新视图function update() {  app.innerHTML = obj.foo}复制代码

/** * @param {*} obj  目标对象 */function observe(obj) {  // 先判断类型, 响应式处理的目标一定要是个对象类型  if (typeof obj !== 'object' || obj === null) {    return  }  // 遍历 obj, 对 obj 的每个属性进行响应式处理  Object.keys(obj).forEach(key => {    defineReactive(obj, key, obj[key])  })}// 定义对象 objconst obj = {  foo: 'foo',  bar: 'bar',  friend: {    name: 'aa'  }}
// 访问 obj 的属性 , foo 和 bar 都被劫持到，就不在浏览器演示了。obj.bar = 'barrrrrrrr' // => 🚀🚀~ set: barobj.foo = 'fooooooooo' // => 🚀🚀~ set: foo
// 访问 obj 的属性 obj.friend.name obj.friend.name = 'bb' // => 🚀🚀~ get: friend复制代码

function defineReactive(obj, key, val) {  // 递归  observe(val)    // 继续执行 Object.defineProperty...  Object.defineProperty(obj, key, {    ... ...  })}
// 再次访问 obj.friend.nameobj.friend.name = 'bb' // => 🚀🚀~ set: name复制代码

const obj = {  friend: {    name: 'aa'  }}obj.friend = {           // => 🚀🚀~ set: friend  name: 'bb'}obj.friend.name = 'cc'   // => 🚀🚀~ get: friend复制代码

function defineReactive(obj, key, val) {  Object.defineProperty(obj, key, {    ... ...    set(newVal) {      // 只有当新值和旧值不同的时候 才会触发重新赋值操作      if (newVal !== val) {        console.log('🚀🚀~ set:', key);        // 如果 newVal 是个对象类型,再次做响应式处理。        if (typeof obj === 'object' && obj !== null) {          observe(newVal)        }        val = newVal      }    }  })}// 再次给 obj.friend 赋值一个对象obj.friend = {  name: 'bb'}// 再次访问 obj.friend.name , 这个时候就成功的劫持到了 name 属性obj.friend.name = 'cc'  //=> 🚀~ set: name复制代码

const obj = {}obj.age = 18obj.age = 20复制代码

/** * @param {*} obj  目标对象 * @param {*} key  目标对象的一个属性 * @param {*} val  目标对象的一个属性的初始值 */function $set(obj, key, val) {  // vue 中在这进行了很多判断，val 是对象还是数组等等，我们就从简了  defineReactive(obj, key, val)}
// 调用 $set 方法给 obj 添加新的属性$set(obj, 'age', 18)
// 再次访问 obj.age obj.age = 20 //=> 🚀🚀~ set: age复制代码

<div id='app'>  <p>{{counter}}</p>  <p>{{counter}}</p>  <p>{{counter}}</p>  <p my-text='counter'></p>  <p my-html='desc'></p>  <button @click='add'>点击增加</button>  <p>{{name}}</p>  <input type="text" my-model='name'></div>
<script>  const app = new MyVue({    el: "#app",    data: {      counter: 1,      desc: `<span style='color:red' >一尾流莺</span>`    },    methods: {      add() {        this.counter++      }    }  })</script>复制代码

// 遍历obj 对其每个属性进行响应式处理function observe(obj) {  // 先判断类型, 响应式处理的目标一定要是个对象类型  if (typeof obj !== 'object' || obj === null) {    return  }  new Observer(obj)}复制代码

// 根据传入value的类型做响应的响应式处理class Observer {  constructor(value) {    this.value = value    if (Array.isArray(value)) {      // todo  这个分支是数组的响应式处理方式 不是本文重点 暂时忽略    } else {      // 这个分支是对象的响应式处理方式      this.walk(value)    }  }
  // 对象的响应式处理 跟前面讲到过的一样，再封装一层函数而已  walk(obj) {    // 遍历 obj, 对 obj 的每个属性进行响应式处理    Object.keys(obj).forEach(key => {      defineReactive(obj, key, obj[key])    })  }}复制代码

class MyVue {  constructor(options) {    // 把数据存一下    this.$options = options    this.$data = options.data
    // data响应式处理    observe(this.$data)
    // 代理 把 this.$data 上的属性 全部挂载到 vue实例上 可以通过 this.key 访问 this.$data.key    proxy(this)  }}复制代码

/** * 代理 把 this.$data 上的属性 全部挂载到 vue实例上 可以通过 this.key 访问 this.$data.key * @param {*} vm vue 实例 */function proxy(vm) {  Object.keys(vm.$data).forEach(key => {    // 通过  Object.defineProperty 方法进行代理 这样访问 this.key 等价于访问 this.$data.key    Object.defineProperty(vm, key, {      get() {        return vm.$data[key]      },      set(newValue) {        vm.$data[key] = newValue      }    })  })}复制代码

// 解析模板语法// 1.处理插值表达式{{}}// 2.处理指令和事件// 3.以上两者初始化和更新class Compile {  /**   * @param {*} el 宿主元素   * @param {*} vm vue实例   */  constructor(el, vm) {    this.$vm = vm    this.$el = document.querySelector(el)
    // 如果元素存在,执行编译    if (this.$el) {      this.compile(this.$el)    }  }
  // 编译  compile(el) {    // 获取 el 的子节点,判断它们的类型做相应的处理    const childNodes = el.childNodes    childNodes.forEach(node => {      // 判断节点的类型 本文以元素和文本为主要内容 不考虑其他类型      if (node.nodeType === 1) { // 这个分支代表节点的类型是元素        // 获取到元素上的属性        const attrs = node.attributes        // 把 attrs 转换成真实数组        Array.from(attrs).forEach(attr => {          // 指令长 my-xxx = 'abc'  这个样子          // 获取节点属性名          const attrName = attr.name          // 获取节点属性值          const exp = attr.value          // 判断节点属性是不是一个指令          if (attrName.startsWith('my-')) {            // 获取具体的指令类型 也就是 my-xxx 后面的 xxx 部分            const dir = attrName.substring(3)            // 如果this[xxx]指令存在  执行这个指令            this[dir] && this[dir](node, exp)          }        })      } else if (this.isInter(node)) { // 这个分支代表节点的类型是文本 并且是个插值语法{{}}        // 文本的初始化        this.compileText(node)      }      // 递归遍历 dom 树      if (node.childNodes) {        this.compile(node)      }    })  }
  // 编译文本  compileText(node) {    // 可以通过 RegExp.$1 来获取到 插值表达式中间的内容 {{key}}    // this.$vm[RegExp.$1] 等价于 this.$vm[key]    // 然后把这个 this.$vm[key] 的值 赋值给文本 就完成了 文本的初始化    node.textContent = this.$vm[RegExp.$1]  }
  // my-text 指令对应的方法  text(node, exp) {    // 这个指令用来修改节点的文本,这个指令长这样子 my-text = 'key'    // 把 this.$vm[key] 赋值给文本 即可    node.textContent = this.$vm[exp]  }
  // my-html 指令对应的方法  html(node, exp) {    // 这个指令用来修改节点的文本,这个指令长这样子 my-html = 'key'    // 把 this.$vm[key] 赋值给innerHTML 即可    node.innerHTML = this.$vm[exp]  }
  // 是否是插值表达式{{}}  isInter(node) {    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)  }}复制代码

// 监听器:负责依赖的更新class Watcher {  /**   * @param {*} vm vue 实例   * @param {*} key Watcher实例对应的 data.key   * @param {*} cb 更新函数   */  constructor(vm, key, updateFn) {    this.vm = vm    this.key = key    this.updateFn = updateFn
    // 触发依赖收集 把当前 Watcher 赋值给 Dep 的静态属性 target    Dep.target = this    // 故意读一下 data.key 的值 为了触发 defineReactive 中的 get    this.vm[this.key]    // 收集依赖以后 再置为null    Dep.target = null  }
  // 更新方法 未来被 Dep 调用  update() {    // 执行实际的更新操作    this.updateFn.call(this.vm, this.vm[this.key])  }}复制代码

class Dep {  constructor() {    this.deps = [] // 存放 Watchers  }  // 收集 Watchers  addDep(dep) {    this.deps.push(dep)  }
  // 通知所有的 Watchers 进行更新 这里的 dep 指的就是收集起来的 Watcher  notify() {    this.deps.forEach(dep => dep.update())  }}复制代码

class Compile {  ... ... // 省略号的地方都没有发生改变    // 下面是发生改变的代码  /**   * 根据指令的类型操作 dom 节点   * @param {*} node dom节点   * @param {*} exp 表达式 this.$vm[key]   * @param {*} dir 指令   */  update(node, exp, dir) {    // 1.初始化 获取到指令对应的实操函数    const fn = this[dir + 'Updater']    //  如果函数存在就执行    fn && fn(node, this.$vm[exp])    // 2.更新 再次调用指令对应的实操函数 值由外面传入    new Watcher(this.$vm, exp, function(val) {      fn && fn(node, val)    })
  }
  // 编译文本 {{xxx}}  compileText(node) {    // 可以通过 RegExp.$1 来获取到 插值表达式中间的内容 {{key}}    // this.$vm[RegExp.$1] 等价于 this.$vm[key]    // 然后把这个 this.$vm[key] 的值 赋值给文本 就完成了 文本的初始化    this.update(node, RegExp.$1, 'text')  }
  // my-text 指令  text(node, exp) {    this.update(node, exp, 'text')  }
  // my-text 指令对应的实操  textUpdater(node, value) {    // 这个指令用来修改节点的文本,这个指令长这样子 my-text = 'key'    // 把 this.$vm[key] 赋值给文本 即可    node.textContent = value  }
  // my-html 指令  html(node, exp) {    this.update(node, exp, 'html')  }
  // my-html 指令对应的实操  htmlUpdater(node, value) {    // 这个指令用来修改节点的文本,这个指令长这样子 my-html = 'key'    // 把 this.$vm[key] 赋值给innerHTML 即可    node.innerHTML = value  }
  // 是否是插值表达式{{}}  isInter(node) {    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)  }
}复制代码

function defineReactive(obj, key, val) {  ... ...   // 创建 Dep 实例 , 与 key 一一对应  const dep = new Dep()
  // 通过该方法拦截数据  Object.defineProperty(obj, key, {    // 读取数据的时候会走这里    get() {      console.log('🚀🚀~ get:', key);      // 依赖收集 Dep.target 就是 一个Watcher      Dep.target && dep.addDep(Dep.target)
      return val    },    // 更新数据的时候会走这里    set(newVal) {      // 只有当新值和旧值不同的时候 才会触发重新赋值操作      if (newVal !== val) {        console.log('🚀🚀~ set:', key);        // 如果 newVal 是个对象类型,再次做响应式处理。        if (typeof obj === 'object' && obj !== null) {          observe(newVal)        }        val = newVal                // 通知更新        dep.notify()      }    }  })}复制代码

class Compile {  ... ... // 省略号的地方都没有发生改变  compile(el) {      // 判断节点属性是不是一个事件      if (this.isEvent(attrName)) {        // @click="onClick"        const dir = attrName.substring(1) // click        // 事件监听        this.eventHandler(node, exp, dir)      }  }  ... ...   // 判断节点是不是一个事件 也就是以@开头  isEvent(dir) {    return dir.indexOf("@") === 0  }  eventHandler(node, exp, dir) {    // 根据函数名字在配置项中获取函数体    const fn = this.$vm.$options.methods && this.$vm.$options.methods[exp]    // 添加事件监听    node.addEventListener(dir, fn.bind(this.$vm))  }  ... ... }复制代码

class Compile {
  // my-model指令 my-model='xxx'  model(node, exp) {    // update 方法只完成赋值和更新    this.update(node, exp, 'model')    // 事件监听    node.addEventListener('input', e => {      // 将新的值赋值给 data.key 即可      this.$vm[exp] = e.target.value    })  }
  modelUpdater(node, value) {    // 给表单元素赋值    node.value = value  }
}复制代码