手写Vue (1) 编译文本

1. 当我们初始化数据后就可以进行将数据进行挂载

首先先判断配置是否有 el 如果有 el 再进行挂载

 if (vm.$options.el) {
    vm.$mount();
  }

2. $mount 这个方法中我们首先要获取到获取当前挂载的节点

let vm = this;
  let el = vm.$options.el
  el = vm.$el = query(el)  // 获取当前挂载的节点

3. 获取当前挂载的节点有两种情况

el: '#app',ru

el: document.getElementById('app;);

所以我们要判断el 是否是一个字符串如果是字符串的话通过 document.querySelector 获取元素否则直接返回

function query(el) {
  if (typeof el === 'string') {
    return document.querySelector(el);
  }
  return el
}

4. 添加渲染watchder

observe/watch.js 传入一系列参数

let id = 0;
class Watcher {
  // watch 有唯一标识
  constructor(vm, exprOrfn, cb = () => { }, opts = {}) {
    // exprOrfn 表达式  cb 回调
    this.vm = vm;
    this.exprOrfn = exprOrfn;
    if (typeof exprOrfn == 'function') {
      // getter 就是  Watcher 传入的第2个函数
      this.getter = exprOrfn;
    }
    this.cb = cb;
    this.opts = opts;
    this.id = id++;
    this.get()
  }
  get() {
  }
}
export default Watcher;

5. 在index.js 引入 watch.js

import Watcher from './observe/watch'

Vue.prototype.$mount = function () {
  let vm = this;
  let el = vm.$options.el
  el = vm.$el = query(el)  // 获取当前挂载的节点
  let updateComponent = () => {
    vm.$update()
    // console.log('数据更新')
  }
  // 渲染watchder
  new Watcher(vm, updateComponent)
}

6. updateComponent 是一个函数里面有一个 $update 方法

在这个方法中主要做的操作是创建一个文档碎片循环的将 el 上挂载的节点依次遍历复制到文档碎片里面

Vue.prototype.$update = function () {
  let vm = this;
  let el = vm.$el
  console.log(el)// 拿到节点
  // 需要匹配{{}}
  let node = document.createDocumentFragment();
  let firstChild;
  while (firstChild = el.firstChild) {
    node.appendChild(firstChild)
  }
  // console.log(node)  // 获取到文档碎片
  el.appendChild(node)
}

let node = document.createDocumentFragment();  创建文档碎片
循环添加到文档碎片里面

while (firstChild = el.firstChild) {
    node.appendChild(firstChild)
 }

7. 测试

8. 获取到 node 节点后我们需要进行编译

compiler(node, vm)

9.编译的时候要判断 node 节点的类型

function compiler(node, vm) {
  let childNodes = node.childNodes;
  ([...childNodes]).forEach(child => {
    // 1  元素  3  文本
    if (child.nodeType == 1) {
      // console.log('2020')
      compiler(child, vm)  //编译孩子节点
    } else if (child.nodeType == 3) {
      // console.log('111')
      util.compilerText(child, vm)
    }
  });
}

如果是元素编译里面的孩子节点

compiler(child, vm)  //编译孩子节点

如果是文本编写一个方法

util.compilerText(child, vm)

10. compilerText 编译文本的方法

  compilerText(node, vm) {  //编译文本
    // 匹配正则
    node.textContent = node.textContent.replace(defaultRe, function (...args) {
      console.log(args, 'test')
      return util.getValue(vm, args[1])
    })
  }

defaultRe 代表 正则

const defaultRe = /{{((?:.| ? )+?)}}/

测试正则：

 "{{xxx}}".match(/{{((?:.|
?
)+?)}}/);
 (2)["{{xxx}}", "xxx", index: 0, input: "{{xxx}}", groups: undefined]
const util = {

通过正则我们可以拿到 {{ }} 里面的东西再通过 util.getValue 获取值

util.getValue 方法

  getValue(vm, expr) {
    console.log(vm, expr)
    let keys = expr.split('.');
    return keys.reduce((arr, current) => {
      arr = arr[current]  // vm.school.name
      return arr
    }, vm)
  },

keys.reduce 是为了防止  vm.school.name 这种表述情况

reduce 可以将上传的结果 作为传入参数

const util = {
  getValue(vm, expr) {
    console.log(vm, expr)
    let keys = expr.split('.');
    return keys.reduce((arr, current) => {
      arr = arr[current]  // vm.school.name
      return arr
    }, vm)
  },
  compilerText(node, vm) {  //编译文本
    // 匹配正则
    node.textContent = node.textContent.replace(defaultRe, function (...args) {
      console.log(args, 'test')
      return util.getValue(vm, args[1])
    })
  }
}

码云地址：

https://gitee.com/guangzhou110/vue_principle