手写Vue3初始化源码

最新推荐文章于 2024-01-19 22:43:37 发布
最新推荐文章于 2024-01-19 22:43:37 发布
阅读量269 收藏 1
点赞数 1
分类专栏： vue源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MiemieWan/article/details/117220491
版权

一、Vue3优点

1.类型支持更好：

  • vue2中使用new Vue的方式会产生动态的东西，像this
  • 使用函数的方式，函数方式减少this的使用，有益于对ts的支持

2.利于tree-shaking:

  • vue2中很多组件与vue实例连在一起，即便没有使用，还是会被打包，没法优化
  • vue3中通过命名导出导入其中的大多数 API，以便打包器可以检测出未使用的代码并删除它们

3.API简化、一致性：render函数、sync修饰符，指令定义等

4.复用性：composition API

5.性能优化：响应式、编译优化

6.扩展性：自定义渲染器

 

二、vue3初始化

vue3初始化用法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>{{ title }}</h3>
    </div>
    <script src="http://unpkg.com/vue@next"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        data() {
          return {
            title: "hello"
          };
        }
      });

      app.mount("#app");
    </script>
  </body>
</html>

 

三、手写vue3初始化代码

整体思路：

从上面的初始化代码可看出，要有以下几点：

1.createApp：从vue中导出createApp

2.mount：createApp()返回包含mount的对象

const Vue = {
	createApp(options) {
		return {
			mount(selector) {
				
			}
		};
	}
};

 mount中会获取渲染函数，渲染DOM元素，并追加到宿主元素

3.compile：返回render函数

4.render：返回DOM元素

const Vue = {
	createApp(options) {
		return {
			mount(selector) {
				const parent = document.querySelector(selector);
				// 获取渲染函数：模板=>渲染函数render
				if (options.render) {
					options.render = this.compile(parent.innerHTML);
				}
				// 渲染DOM,追加到宿主元素
				const el = options.render.call(options.data());
				parent.innerHTML = "";
				parent.appendChild(el);
			},
			// 将模板转化为渲染函数
			compile(template) {
				return function render() {
					// 描述视图
                    // 假设返回h3
					const h3 = document.createElement("h3");
					h3.textContent = this.title;
					return h3;
				};
			}
		};
	}
};

5.兼容composion API：用Proxy对属性进行监听，当setup中有该属性时，获取setup中的值，没有时再去data、methods等中查找

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>{{ title }}</h3>
    </div>
    <!-- <script src="http://unpkg.com/vue@next"></script> -->
    <script>
      const Vue = {
        createApp(options) {
          return {
            mount(selector) {
              const parent = document.querySelector(selector);
              // 获取渲染函数：模板=>渲染函数render
              if (!options.render) {
                options.render = this.compile(parent.innerHTML);
                console.log(options.render);
              }

              // 将setup和data中的数据分别保存到app实例上,以便后面使用
              if (options.setup) {
                this.setupState = options.setup();
              } else {
                this.data = options.data();
              }
              // 兼容composition API
              this.proxy = new Proxy(this, {
                get(target, key) {
                  if (key in target.setupState) {
                    return target.setupState[key];
                  }
                  return target.data[key];
                },
                set(target, key, val) {
                  if (key in target.setupState) {
                    target.setupState[key] = val;
                  } else {
                    target.data[key] = val;
                  }
                }
              });

              // 渲染DOM,追加到宿主元素
              const el = options.render.call(this.proxy);
              parent.innerHTML = "";
              parent.appendChild(el);
            },
            // 将模板转化为渲染函数
            compile(template) {
              return function render() {
                // console.log(this); //call绑定后this指向绑定的数据
                // 描述视图
                const h3 = document.createElement("h3");
                h3.textContent = this.title;
                return h3;
              };
            }
          };
        }
      };
    </script>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        data() {
          return {
            title: "hello"
          };
        },
        setup() {
          return {
            title: "setup title"
          };
        }
      });

      app.mount("#app");
    </script>
  </body>
</html>

6.createRenderer：渲染器，针对不同的平台环境，有不同的代码，增加代码的扩展性。

浏览器环境：设置一个通用的渲染器，将需要用到的dom操作作为参数传进去

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>{{ title }}</h3>
    </div>
    <!-- <script src="http://unpkg.com/vue@next"></script> -->
    <script>
      const Vue = {
        createApp(options) {
          const renderer = Vue.createRenderer({
            querySelector(selector) {
              return document.querySelector(selector);
            },
            insert(child, parent, anchor) {
              parent.insertBefore(child, anchor || null);
            }
          });
          return renderer.createApp(options);
        },
        createRenderer({ querySelector, insert }) {
          // 获得渲染器
          return {
            createApp(options) {
              return {
                mount(selector) {
                  const parent = querySelector(selector);
                  // 获取渲染函数：模板=>渲染函数render
                  if (!options.render) {
                    options.render = this.compile(parent.innerHTML);
                    console.log(options.render);
                  }

                  // 将setup和data中的数据分别保存到app实例上,以便后面使用
                  if (options.setup) {
                    this.setupState = options.setup();
                  } else {
                    this.data = options.data();
                  }
                  // 兼容composition API
                  this.proxy = new Proxy(this, {
                    get(target, key) {
                      if (key in target.setupState) {
                        return target.setupState[key];
                      }
                      return target.data[key];
                    },
                    set(target, key, val) {
                      if (key in target.setupState) {
                        target.setupState[key] = val;
                      } else {
                        target.data[key] = val;
                      }
                    }
                  });

                  // 渲染DOM,追加到宿主元素
                  const el = options.render.call(this.proxy);
                  parent.innerHTML = "";
                  insert(el, parent);
                },
                // 将模板转化为渲染函数
                compile(template) {
                  return function render() {
                    // console.log(this); //call绑定后this指向绑定的数据
                    // 描述视图
                    const h3 = document.createElement("h3");
                    h3.textContent = this.title;
                    return h3;
                  };
                }
              };
            }
          };
        }
      };
    </script>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        data() {
          return {
            title: "hello"
          };
        },
        setup() {
          return {
            title: "setup title"
          };
        }
      });

      app.mount("#app");
    </script>
  </body>
</html>

 

四、总结

vue3初始化中做了什么：

  • vue3中初始化时设置了一个渲染器，返回createApp方法
  • createApp方法返回一个mount方法
  • mount方法里对composition API做兼容处理，获取渲染函数，渲染DOM并追加到宿主元素
  • 初始化时调用的createApp中，获取设置好的渲染器并传入渲染参数，返回渲染器中的createApp方法

 

 

 

 

MiemieWan
关注
专栏目录
【手写 Vue2.x 源码】第二篇 - Vue 的初始化流程
01-07
文章：【手写 Vue2.x 源码】第二篇 - Vue 的初始化流程 链接：https://blog.csdn.net/ABAP_Brave/article/details/128555243 内容：第二篇 - Vue 的初始化流程；本篇主要介绍了 Vue 数据的初始化流程，核心点： 1，...
【手写 Vue2.x 源码】第三篇 - 对象的单层劫持
01-08
本篇主要介绍了 Vue 数据初始化流程中，对象属性的单层劫持，核心处理： 1，data 为函数或对象两种类型的处理； 2，处理 data 函数中 this 的指向问题； 3，Observer 类，对数据进行观测；walk 方法，遍历 data 属性...
来一起造轮子：手写 Vue3 reactivity 模块
web前端开发
01-13 236
最近和一个猎头聊天，说到现在前端供需脱节的境况。一方面用人方招不到想要的中高级前端，另一方面市场上有大量初级前端薪资要不上价。特别是用 Vue 框架的，因为好上手，所以很多人将 Vue ...
手写Vue3源码
最新发布
SongZhengxing_的博客
01-19 1036
Monorepo是管理项目代码的一种方式，只在一个仓库中管理多个模块/包一个仓库可以维护多个模块，不用到处找仓库方便版本管理和依赖管理，模块之间的引用和调用都非常方便缺点：仓库的体积变大，打包和安装依赖都会变慢例如Vue3源码、element-plus 等都已经采用这种方式来管理项目了解更多可以查看这个文档：https://www.modb.pro/db/626876。
手写vue3源码——ref, computed 等
twinkle的博客
06-09 568
手写vue3源码——创建项目手写vue3源码——reactive, effect ,scheduler, stop手写vue3源码——readonly, isReactive,isReadonly, shallowReadonly本期主要实现的api有，ref, isRef, unRef, proxyRefs, computed，本次所有的源码请查看在代码中，这个api也是用的很频繁的,所以今天咋们就一起来实现下既然都需要使用 .value，是不是意味着，传入的数据都会被一个对象所包裹，基于...
千层套路 - Vue 3.0 初始化源码探秘
u012384510的博客
12-22 925
关注若川视野, 回复"pdf" 领取资料，回复"1"，可加群长期交流学习刘崇桢，微医云服务团队前端工程师，左手抱娃、右手持家的非典型码农。9 月初 Vue...
手写vue3源码——创建项目
twinkle的博客
06-02 854
在前面的文章中，分析了vue3的响应式数据原理、vue组件初始化流程、vue组件更新流程等文章，有人说学习源码的最好方式，就是把别人的思路理解到来，自己手动敲一遍。那咋们就来手动敲一敲，并且把整个过程记录下来，给有需要的有缘人😃😃😃vue3源码采用的是pnpm + monorepo的方式来创建仓库的。那咋也学习下，用pnpm + monorepo的方式来创建一个自己的源码库使用 来初始化项目 然后改动下的内容如下： 增加 来使项目是一个monorope的项目，并且里面增加内容如下： packages
【手写 Vue2.x 源码】第一篇 - 使用 rollup 构建 Vue 环境
01-07
文章：【手写 Vue2.x 源码】第一篇 - 使用 rollup 构建 Vue 环境 ... 内容：第一篇-使用 rollup 构建 Vue 环境： 工程初始化、安装依赖、创建入口、配置 Rollup 、构建脚本、Vue 打包构建，vue 使用测试；
【手写 Vue2.x 源码】第五篇 - 数组的劫持
01-09
内容：本篇主要介绍了 Vue 数据初始化流程中，数组类型的数据劫持，核心有以下几点： 出于对性能的考虑，Vue 没有对数组类型的数据使用 Object.defineProperty 进行递归劫持，而是通过对能够导致原数组变化的 7 个...
【手写 Vue2.x 源码】第四篇 - 对象的深层劫持
01-08
文章：【手写 Vue2.x 源码】第四篇 - 对象的深层劫持 链接：https://blog.csdn.net/ABAP_Brave/article/details/128566839 内容：对象深层劫持的实现 1. 通过`data = isFunction(data) ? data.call(vm) : data;`...
vsCode配置Vue3初始化代码片段
akkigg的博客
11-02 616
vsCode配置Vue3初始化代码片段
手写vue3核心源码——响应式原理(Computed篇)
qq_63204040的博客
07-25 731
手写vue3核心源码——响应式原理(Computed篇)
手写vue3源码——reactive, effect ,scheduler, stop 等
twinkle的博客
06-07 514
, 大家都清除 ,但是对于, 等方法是需要看源码咋们才能明白的😃😃😃，在上一节中，咋们用 pnpm 搭建了一个和vue3一样的monorepo，这一节中，就使用这个方式在里面填充的源码吧！本节的源码请查看本次目标主要是实现，reactive，effect stop, onstop, scheduler 等为了方便大家的理解，这一次咋们就从 测试用例的角度，来写出源码，vue3的响应式相信大家都用过，那么用测试用例来描述则是这样的。 reactive 看到 想必都不陌生，传入一个对象，返回一个代理对...
3-2-03-Vue.js 源码阅读-初始化过程
丁晓东go
08-10 94
Vue 初始化的过程 四个导出 Vue 的模块 src/platforms/web/entry-runtime-with-compiler.js web 平台相关的入口 重写了平台相关的 $mount() 方法 注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数 src/platforms/web/runtime/index.js web 平台相关 注册和平台相关的全局指令：v-model、v-show 注册和平台相关的全局组件：v-transitio
【vue3源码学习】初始化流程分析：渲染器与 createApp
sinat_33255495的博客
10-25 871
学习 vue3 源码，是不是一时不知道从哪里入手？不了解哪些有依赖关系，哪些能做什么事？今天我们就 vue 项目的初始化流程进行分析。
Vue源码学习：手写Vue（三）—— proxy
xliang111的博客
05-22 277
我们希望能通过hvue的实例访问我$data中的属性（如：this.message），这时我们可以通知代码现实。 1、为HVue类添加proxyData方法 // hvue.js class HVue { proxyData(key) { Object.defineProperty(this, key, { get() { return this.$data[key]; }, set(newVal) { this.$data[k
手写 Vue3.0 源码 —— 搭建基础开发环境
兰亭古墨
06-12 411
搭建基础开发环境 github: https://github.com/hefeng6500/build-your-own-vue3 文档： https://hefeng6500.github.io/vue3.0-analysis/mini-vue3/base-env.html 搭建 mini-vue3 基础开发环境全部按照 Vue-next 配置进行操作，删繁就简为实现一个简洁、可用、高效的环境！ 创建完成后目录如下 build-your-own-vue3 ├─ .gitignore ├─ doc │
.Vue3项目初始化
code袁的博客
05-16 1088
切换Components，并且加入css配置项。vite-config.json中配置。配置vite.config.json。
Vue3源码学习 -- 2、初始化流程分析
凌峰的博客
02-24 295
上面我们已经将初始化流程调试了一遍，接下来我们可以通过初始化流程的函数调用栈来总结复盘一下。从下往上看，第一个是一个自调用函数，这个就是挂载，也就是 .mount(‘#app’)；然后执行了重写的方法 app.mount；在 app.mount 中执行了原生的 mount 方法；mount 中执行了将 vnode 方法转化为 dom 的 render 方法；render 方法最终执行的是 patch 方法；在 patch 方法中，会通过类型判断当前是组件还是元素等；
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值