vue的工作机制

image.png

初始化

在 new Vue() 时会调用_init()进行初始化，会初始化各种实例方法、全局方法、执行一些生命周期、初始化
props、data等状态。其中最重要的是data的「响应化」处理。 初始化之后调用 $mount 挂载组件，主要执行编译和首次更新

编译

编译模块分为三个阶段
1. parse:使用正则解析template中的vue的指令(v-xxx) 变量等等 形成抽象语法树AST
2. optimize:标记一些静态节点，用作后面的性能优化，在diff的时候直接略过
3. generate:把第一部生成的AST 转化为渲染函数 render function

更新

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

实现kvue

image.png

kvue源码

  1. // new KVue({
  2. //     data: {
  3. //         msg: 'hello'
  4. //     }
  5. // })
  7. class KVue {
  8.   constructor(options) {
  9.     this.$options = options;
  11.     this.$data = options.data;
  12.     // 响应化
  13.     this.observe(this.$data);
  15.     // 测试代码
  16.     // new Watcher(this, 'test');
  17.     // this.test;
  19.     // 创建编译器
  20.     new Compile(options.el, this);
  22.     if (options.created) {
  23.         options.created.call(this);
  24.     }
  25.   }
  27.   // 递归遍历，使传递进来的对象响应化
  28.   observe(value) {
  29.     if (!value || typeof value !== "object") {
  30.       return;
  31.     }
  33.     // 遍历
  34.     Object.keys(value).forEach(key => {
  35.       // 对key做响应式处理
  36.       this.defineReactive(value, key, value[key]);
  37.       this.proxyData(key);
  38.     });
  39.   }
  41.   // 在vue根上定义属性代理data中的数据
  42.   proxyData(key) {
  43.     Object.defineProperty(this, key, {
  44.       get() {
  45.         return this.$data[key];
  46.       },
  47.       set(newVal) {
  48.         this.$data[key] = newVal;
  49.       }
  50.     });
  51.   }
  52.   //
  53.   defineReactive(obj, key, val) {
  54.     // 递归
  55.     this.observe(val);
  57.     // 创建Dep实例：Dep和key一对一对应
  58.     const dep = new Dep();
  60.     // 给obj定义属性
  61.     Object.defineProperty(obj, key, {
  62.       get() {
  63.         // 将Dep.target指向的Watcher实例加入到Dep中
  64.         Dep.target && dep.addDep(Dep.target);
  65.         return val;
  66.       },
  67.       set(newVal) {
  68.         if (newVal !== val) {
  69.           val = newVal;
  70.           dep.notify();
  71.         }
  72.       }
  73.     });
  74.   }
  75. }
  77. // Dep:管理若干watcher实例，它和key一对一关系
  78. class Dep {
  79.   constructor() {
  80.     this.deps = [];
  81.   }
  83.   addDep(watcher) {
  84.     this.deps.push(watcher);
  85.   }
  87.   notify() {
  88.     this.deps.forEach(watcher => watcher.update());
  89.   }
  90. }
  92. // 保存ui中依赖，实现update函数可以更新之
  93. class Watcher {
  94.   constructor(vm, key, cb) {
  95.     this.vm = vm;
  96.     this.key = key;
  97.     this.cb = cb;
  99.     // 将当前实例指向Dep.target
  100.     Dep.target = this;
  101.     this.vm[this.key];// 读一次key触发getter
  102.     Dep.target = null;
  103.   }
  105.   update() {
  106.       this.cb.call(this.vm, this.vm[this.key])
  107.     // console.log(`${this.key}属性更新了`);
  108.   }
  109. }

compile.js

  1. // 遍历模板，将里面的插值表达式处理
  2. // 另外如果发现k-xx, @xx做特别处理
  3. class Compile {
  4.   constructor(el, vm) {
  5.     this.$vm = vm;
  6.     this.$el = document.querySelector(el);
  8.     if (this.$el) {
  9.       // 1.$el中的内容搬家到一个fragment，提高操作效率
  10.       this.$fragment = this.node2Fragment(this.$el);
  11.       //   console.log(this.$fragment);
  13.       // 2.编译fragment
  14.       this.compile(this.$fragment);
  15.       //   console.log(this.$fragment);
  17.       // 3.将编译结果追加至宿主中
  18.       this.$el.appendChild(this.$fragment);
  19.     }
  20.   }
  22.   //   遍历el,把里面内容搬到新创建fragment中
  23.   node2Fragment(el) {
  24.     const fragment = document.createDocumentFragment();
  25.     let child;
  26.     while ((child = el.firstChild)) {
  27.       // 由于appenChild是移动操作
  28.       fragment.appendChild(child);
  29.     }
  30.     return fragment;
  31.   }
  33.   //   把动态值替换，把指令和事件做处理
  34.   compile(el) {
  35.     // 遍历el
  36.     const childNodes = el.childNodes;
  37.     Array.from(childNodes).forEach(node => {
  38.       if (this.isElement(node)) {
  39.         // console.log("编译元素：" + node.nodeName);
  41.         // 如果是元素节点，我们要处理指令k-xx，事件@xx
  42.         this.compileElement(node);
  43.       } else if (this.isInterpolation(node)) {
  44.         // console.log("编译文本：" + node.textContent);
  45.         this.compileText(node);
  46.       }
  48.       //   递归子元素
  49.       if (node.childNodes && node.childNodes.length > 0) {
  50.         this.compile(node);
  51.       }
  52.     });
  53.   }
  55.   isElement(node) {
  56.     return node.nodeType === 1;
  57.   }
  58.   //   插值表达式判断
  59.   isInterpolation(node) {
  60.     //   需要满足{{xx}}
  61.     return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
  62.   }
  64.   compileElement(node) {
  65.     // 查看node的特性中是否有k-xx，@xx
  66.     const nodeAttrs = node.attributes;
  67.     Array.from(nodeAttrs).forEach(attr => {
  68.       // 获取属性名称和值 k-text="abc"
  69.       const attrName = attr.name; // k-text
  70.       const exp = attr.value; // abc
  71.       // 指令：k-xx
  72.       if (attrName.indexOf("k-") === 0) {
  73.         const dir = attrName.substring(2); // text
  74.         // 执行指令
  75.         this[dir] && this[dir](node, this.$vm, exp);
  76.       } else if(attrName.indexOf('@') === 0) {
  77.           // 事件 @click="handlClick"
  78.           const eventName = attrName.substring(1); // click
  79.           this.eventHandler(node, this.$vm, exp, eventName);
  81.       }
  82.     });
  83.   }
  84.   text(node, vm, exp) {
  85.     this.update(node, vm, exp, "text");
  86.   }
  88.   //   双向数据绑定
  89.   model(node, vm, exp) {
  90.     // update是数据变了改界面
  91.     this.update(node, vm, exp, "model");
  92.     // 界面变了改数值
  93.     node.addEventListener("input", e => {
  94.       vm[exp] = e.target.value;
  95.     });
  96.   }
  98.   modelUpdator(node, value) {
  99.     node.value = value;
  100.   }
  102.   html(node, vm, exp) {
  103.     this.update(node, vm, exp, "html");
  104.   }
  105.   htmlUpdator(node, value) {
  106.     node.innerHTML = value;
  107.   }
  109.   eventHandler(node, vm, exp, eventName){
  110.     // 获取回调函数
  111.     const fn = vm.$options.methods && vm.$options.methods[exp];
  112.     if(eventName && fn) {
  113.         node.addEventListener(eventName, fn.bind(vm))
  114.     }
  115.   }
  117.   //   把插值表达式替换为实际内容
  118.   compileText(node) {
  119.     // {{xxx}}
  120.     // RegExp.$1是匹配分组部分
  121.     // console.log(RegExp.$1);
  123.     const exp = RegExp.$1;
  124.     this.update(node, this.$vm, exp, "text");
  125.   }
  127.   // 编写update函数，它可复用
  128.   // exp是表达式， dir是具体操作：text,html,model
  129.   update(node, vm, exp, dir) {
  130.     const fn = this[dir + "Updator"];
  131.     fn && fn(node, vm[exp]);
  132.     // 创建Watcher
  133.     // new Vue({
  134.     //     data: {
  135.     //         xxx: 'bla'
  136.     //     }
  137.     // })
  138.     // exp就是xxx
  139.     new Watcher(vm, exp, function() {
  140.       fn && fn(node, vm[exp]);
  141.     });
  142.   }
  144.   textUpdator(node, value) {
  145.     node.textContent = value;
  146.   }
  147. }