一、整体工作流程

网络异常，图片无法展示

编译器将视图模板编译为渲染函数

数据响应模块将数据对象初始化为响应式数据对象

视图渲染

RenderPhase ：渲染模块使用渲染函数根据初始化数据生成虚拟Dom

b. MountPhase ：利用虚拟Dom创建视图页面Html

c.PatchPhase：数据模型一旦变化渲染函数将再次被调用生成新的虚拟Dom，然后做Dom Diff更新视图Html

二、三大模块的分工

网络异常，图片无法展示

数据响应式模块

编译器

渲染函数

1. 数据响应式模块

提供创建一切数据变化都是可以被监听的响应式对象的方法。

网络异常，图片无法展示

2. 编译模块

网络异常，图片无法展示

将html模板编译为渲染函数

这个编译过程可以在一下两个时刻执行

浏览器运行时 (runtime)

Vue项目打包编译时 (compile time)

3. 渲染函数

渲染函数通过以下三个周期将视图渲染到页面上

网络异常，图片无法展示

Render Phase

Mount Phase

Patch Phase

三、MVVM原型(Mock版)

网络异常，图片无法展示

MVVM框架其实就是在原先的View和Model之间增加了一个VM层完成以下工作。完成数据与视图的监听。我们这一步先写一个Mock版本。其实就是先针对固定的视图和数据模型实现监听。

1. 接口定义

我们MVVM的框架接口和Vue3一模一样。

初始化需要确定

视图模板

数据模型

模型行为 - 比如我们希望click的时候数据模型的message会会倒序排列。

const App = {
  // 视图
  template: `
<input v-model="message"/>
<button @click='click'>{{message}}</button>
`,
  setup() {
    // 数据劫持
    const state = new Proxy(
      {
        message: "Hello Vue 3!!",
      },
      {
        set(target, key, value, receiver) {
          const ret = Reflect.set(target, key, value, receiver);
          // 触发函数响应
          effective();
          return ret;
        },
      }
    );
    const click = () => {
      state.message = state.message.split("").reverse().join("");
    };
    return { state, click };
  },
};
const { createApp } = Vue;
createApp(App).mount("#app");

2. 程序骨架

程序执行过程大概如图：

网络异常，图片无法展示

const Vue = {
  createApp(config) {
    // 编译过程
    const compile = (template) => (content, dom) => {
    };
    // 生成渲染函数
    const render = compile(config.template);
    return {
      mount: function (container) {
        const dom = document.querySelector(container);
        // 实现setup函数
        const setupResult = config.setup();
        // 数据响应更新视图
        effective = () => render(setupResult, dom);
        render(setupResult, dom);
      },
    };
  },
};

3. 编译渲染函数

MVVM框架中的渲染函数是会通过视图模板的编译建立的。

// 编译函数
// 输入值为视图模板
const compile = (template) => {
  //渲染函数
  return (observed, dom) => {
    // 渲染过程
  }
}

简单的说就是对视图模板进行解析并生成渲染函数。

大概要处理以下三件事

确定哪些值需要根据数据模型渲染

// <button>{{message}}</button>
// 将数据渲染到视图
button = document.createElement('button')
button.innerText = observed.message
dom.appendChild(button)

绑定模型事件

// <button @click='click'>{{message}}</button>
// 绑定模型事件
button.addEventListener('click', () => {
  return config.methods.click.apply(observed)
})

确定哪些输入项需要双向绑定

// <input v-model="message"/>
// 创建keyup事件监听输入项修改
input.addEventListener('keyup', function () {
  observed.message = this.value
})

完整的代码

const compile = (template) => (observed, dom) => {
    // 重新渲染
    let input = dom.querySelector('input')
    if (!input) {
        input = document.createElement('input')
        input.setAttribute('value', observed.message)
        input.addEventListener('keyup', function () {
            observed.message = this.value
        })
        dom.appendChild(input)
    }
    let button = dom.querySelector('button')
    if (!button) {
        console.log('create button')
        button = document.createElement('button')
        button.addEventListener('click', () => {
            return config.methods.click.apply(observed)
        })
        dom.appendChild(button)
    }
    button.innerText = observed.message
}

四、数据响应实现

Vue普遍走的就是数据劫持方式。不同的在于使用DefineProperty还是Proxy。也就是一次一个属性劫持还是一次劫持一个对象。当然后者比前者听着就明显有优势。这也就是Vue3的响应式原理。

Proxy/Reflect是在ES2015规范中加入的，Proxy可以更好的拦截对象行为，Reflect可以更优雅的操纵对象。优势在于

针对整个对象定制而不是对象的某个属性，所以也就不需要对keys进行遍历。

支持数组,这个DefineProperty不具备。这样就省去了重载数组方法这样的Hack过程。

Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富

Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法

可以通过递归方便的进行对象嵌套。

说了这么多我们先来一个小例子

var obj = new Proxy({}, {
    get: function (target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
        console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
    }
})
obj.abc = 132

这样写如果你修改obj中的值，就会打印出来。

也就是说如果对象被修改就会得的被响应。

网络异常，图片无法展示

当然我们需要的响应就是重新更新视图也就是重新运行render方法。

首先制造一个抽象的数据响应函数

// 定义响应函数
let effective
observed = new Proxy(config.data(), {
  set(target, key, value, receiver) {
    const ret = Reflect.set(target, key, value, receiver)
    // 触发函数响应
    effective()
    return ret
  },
})

在初始化的时候我们设置响应动作为渲染视图

const dom = document.querySelector(container)
// 设置响应动作为渲染视图
effective = () => render(observed, dom)
render(observed, dom)

1. 视图变化的监听

浏览器视图的变化,主要体现在对输入项变化的监听上，所以只需要通过绑定监听事件就可以了。

document.querySelector('input').addEventListener('keyup', function () {
  data.message = this.value
})

2. 完整的代码

<html lang="en">
  <body>
    <div id="app"></div>
    <script>
      const Vue = {
        createApp(config) {
          // 编译过程
          const compile = (template) => (content, dom) => {
            // 重新渲染
            dom.innerText = "";
            input = document.createElement("input");
            input.addEventListener("keyup", function () {
              content.state.message = this.value;
            });
            input.setAttribute("value", content.state.message);
            dom.appendChild(input);
            let button = dom.querySelector("button");
            button = document.createElement("button");
            button.addEventListener("click", () => {
              return content.click.apply(content.state);
            });
            button.innerText = content.state.message;
            dom.appendChild(button);
          };
          // 生成渲染函数
          const render = compile(config.template);
          return {
            mount: function (container) {
              const dom = document.querySelector(container);
              const setupResult = config.setup();
              effective = () => render(setupResult, dom);
              render(setupResult, dom);
            },
          };
        },
      };
      // 定义响应函数
      let effective;
      const App = {
        // 视图
        template: `
                <input v-model="message"/>
                <button @click='click'>{{message}}</button>
            `,
        setup() {
          // 数据劫持
          const state = new Proxy(
            {
              message: "Hello Vue 3!!",
            },
            {
              set(target, key, value, receiver) {
                const ret = Reflect.set(target, key, value, receiver);
                // 触发函数响应
                effective();
                return ret;
              },
            }
          );
          const click = () => {
            state.message = state.message.split("").reverse().join("");
          };
          return { state, click };
        },
      };
      const { createApp } = Vue;
      createApp(App).mount("#app");
    </script>
  </body>
</html>

五、视图渲染过程

Dom => virtual DOM => render functions

1. 什么是Dom 、Document Object Model

网络异常，图片无法展示

HTML在浏览器中会映射为一些列节点，方便我们去调用。

网络异常，图片无法展示

2. 什么是虚拟Dom

Dom中节点众多，直接查询和更新Dom性能较差。

A way of representing the actual DOM with JavaScript Objects. 用JS对象重新表示实际的Dom

网络异常，图片无法展示

3. 什么是渲染函数

在Vue中我们通过将视图模板(template)编译为渲染函数(render function)再转化为虚拟Dom

网络异常，图片无法展示

4. 通过DomDiff高效更新视图

网络异常，图片无法展示

5. 总结

举个栗子🌰 虚拟Dom和Dom就像大楼和大楼设计图之间的关系。

网络异常，图片无法展示

假设你要在29层添加一个厨房 ❌ 拆除整个29层，重新建设 ✅先绘制设计图，找出新旧结构不同然后建设

[Vue官方教程笔记]- 尤雨溪手写mini-vue（上）

一、整体工作流程

二、三大模块的分工

1. 数据响应式模块

2. 编译模块

3. 渲染函数

三、MVVM原型(Mock版)

1. 接口定义

2. 程序骨架

3. 编译渲染函数

四、数据响应实现

1. 视图变化的监听

2. 完整的代码

五、视图渲染过程

1. 什么是Dom 、Document Object Model

2. 什么是虚拟Dom

3. 什么是渲染函数

4. 通过DomDiff高效更新视图

5. 总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

[Vue官方教程笔记]- 尤雨溪手写mini-vue（上）

一、整体工作流程

二、三大模块的分工

1. 数据响应式模块

2. 编译模块

3. 渲染函数

三、MVVM原型(Mock版)

1. 接口定义

2. 程序骨架

3. 编译渲染函数

四、数据响应实现

1. 视图变化的监听

2. 完整的代码

五、 视图渲染过程

1. 什么是Dom 、Document Object Model

2. 什么是虚拟Dom

3. 什么是渲染函数

4. 通过DomDiff高效更新视图

5. 总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

五、视图渲染过程