前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册
本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(2)

手写Vue3初始化源码

发布于2021-05-30 12:27     阅读(1328)     评论(0)     点赞(12)     收藏(2)

一、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初始化用法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <h3>{{ title }}</h3>
  12.     </div>
  13.     <script src="http://unpkg.com/vue@next"></script>
  14.     <script>
  15.       const { createApp } = Vue;
  16.       const app = createApp({
  17.         data() {
  18.           return {
  19.             title: "hello"
  20.           };
  21.         }
  22.       });
  23.  
  24.       app.mount("#app");
  25.     </script>
  26.   </body>
  27. </html>

 

三、手写vue3初始化代码

整体思路：

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

1.createApp：从vue中导出createApp

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

  1. const Vue = {
  2. 	createApp(options) {
  3. 		return {
  4. 			mount(selector) {
  5. 				
  6. 			}
  7. 		};
  8. 	}
  9. };

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

3.compile：返回render函数

4.render：返回DOM元素

  1. const Vue = {
  2. 	createApp(options) {
  3. 		return {
  4. 			mount(selector) {
  5. 				const parent = document.querySelector(selector);
  6. 				// 获取渲染函数：模板=>渲染函数render
  7. 				if (options.render) {
  8. 					options.render = this.compile(parent.innerHTML);
  9. 				}
  10. 				// 渲染DOM,追加到宿主元素
  11. 				const el = options.render.call(options.data());
  12. 				parent.innerHTML = "";
  13. 				parent.appendChild(el);
  14. 			},
  15. 			// 将模板转化为渲染函数
  16. 			compile(template) {
  17. 				return function render() {
  18. 					// 描述视图
  19.                     // 假设返回h3
  20. 					const h3 = document.createElement("h3");
  21. 					h3.textContent = this.title;
  22. 					return h3;
  23. 				};
  24. 			}
  25. 		};
  26. 	}
  27. };

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <h3>{{ title }}</h3>
  12.     </div>
  13.     <!-- <script src="http://unpkg.com/vue@next"></script> -->
  14.     <script>
  15.       const Vue = {
  16.         createApp(options) {
  17.           return {
  18.             mount(selector) {
  19.               const parent = document.querySelector(selector);
  20.               // 获取渲染函数：模板=>渲染函数render
  21.               if (!options.render) {
  22.                 options.render = this.compile(parent.innerHTML);
  23.                 console.log(options.render);
  24.               }
  25.  
  26.               // 将setup和data中的数据分别保存到app实例上,以便后面使用
  27.               if (options.setup) {
  28.                 this.setupState = options.setup();
  29.               } else {
  30.                 this.data = options.data();
  31.               }
  32.               // 兼容composition API
  33.               this.proxy = new Proxy(this, {
  34.                 get(target, key) {
  35.                   if (key in target.setupState) {
  36.                     return target.setupState[key];
  37.                   }
  38.                   return target.data[key];
  39.                 },
  40.                 set(target, key, val) {
  41.                   if (key in target.setupState) {
  42.                     target.setupState[key] = val;
  43.                   } else {
  44.                     target.data[key] = val;
  45.                   }
  46.                 }
  47.               });
  48.  
  49.               // 渲染DOM,追加到宿主元素
  50.               const el = options.render.call(this.proxy);
  51.               parent.innerHTML = "";
  52.               parent.appendChild(el);
  53.             },
  54.             // 将模板转化为渲染函数
  55.             compile(template) {
  56.               return function render() {
  57.                 // console.log(this); //call绑定后this指向绑定的数据
  58.                 // 描述视图
  59.                 const h3 = document.createElement("h3");
  60.                 h3.textContent = this.title;
  61.                 return h3;
  62.               };
  63.             }
  64.           };
  65.         }
  66.       };
  67.     </script>
  68.     <script>
  69.       const { createApp } = Vue;
  70.       const app = createApp({
  71.         data() {
  72.           return {
  73.             title: "hello"
  74.           };
  75.         },
  76.         setup() {
  77.           return {
  78.             title: "setup title"
  79.           };
  80.         }
  81.       });
  82.  
  83.       app.mount("#app");
  84.     </script>
  85.   </body>
  86. </html>

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <h3>{{ title }}</h3>
  12.     </div>
  13.     <!-- <script src="http://unpkg.com/vue@next"></script> -->
  14.     <script>
  15.       const Vue = {
  16.         createApp(options) {
  17.           const renderer = Vue.createRenderer({
  18.             querySelector(selector) {
  19.               return document.querySelector(selector);
  20.             },
  21.             insert(child, parent, anchor) {
  22.               parent.insertBefore(child, anchor || null);
  23.             }
  24.           });
  25.           return renderer.createApp(options);
  26.         },
  27.         createRenderer({ querySelector, insert }) {
  28.           // 获得渲染器
  29.           return {
  30.             createApp(options) {
  31.               return {
  32.                 mount(selector) {
  33.                   const parent = querySelector(selector);
  34.                   // 获取渲染函数：模板=>渲染函数render
  35.                   if (!options.render) {
  36.                     options.render = this.compile(parent.innerHTML);
  37.                     console.log(options.render);
  38.                   }
  39.  
  40.                   // 将setup和data中的数据分别保存到app实例上,以便后面使用
  41.                   if (options.setup) {
  42.                     this.setupState = options.setup();
  43.                   } else {
  44.                     this.data = options.data();
  45.                   }
  46.                   // 兼容composition API
  47.                   this.proxy = new Proxy(this, {
  48.                     get(target, key) {
  49.                       if (key in target.setupState) {
  50.                         return target.setupState[key];
  51.                       }
  52.                       return target.data[key];
  53.                     },
  54.                     set(target, key, val) {
  55.                       if (key in target.setupState) {
  56.                         target.setupState[key] = val;
  57.                       } else {
  58.                         target.data[key] = val;
  59.                       }
  60.                     }
  61.                   });
  62.  
  63.                   // 渲染DOM,追加到宿主元素
  64.                   const el = options.render.call(this.proxy);
  65.                   parent.innerHTML = "";
  66.                   insert(el, parent);
  67.                 },
  68.                 // 将模板转化为渲染函数
  69.                 compile(template) {
  70.                   return function render() {
  71.                     // console.log(this); //call绑定后this指向绑定的数据
  72.                     // 描述视图
  73.                     const h3 = document.createElement("h3");
  74.                     h3.textContent = this.title;
  75.                     return h3;
  76.                   };
  77.                 }
  78.               };
  79.             }
  80.           };
  81.         }
  82.       };
  83.     </script>
  84.     <script>
  85.       const { createApp } = Vue;
  86.       const app = createApp({
  87.         data() {
  88.           return {
  89.             title: "hello"
  90.           };
  91.         },
  92.         setup() {
  93.           return {
  94.             title: "setup title"
  95.           };
  96.         }
  97.       });
  98.  
  99.       app.mount("#app");
  100.     </script>
  101.   </body>
  102. </html>

 

四、总结

vue3初始化中做了什么：

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

 

 

 

 




所属网站分类: 技术文章 > 博客

作者：前端黄柠檬

链接：http://www.qianduanheidong.com/blog/article/116067/d4a497fa23a09834b666/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new)

window属性：controllers

如何用Idea或者webstorm跑一个Vue项目

“我对技术架构的理解与架构师角色的思考” 读后感

程序员狂怒：薪水被应届生倒挂了，很不爽，天王老子也别想留住我！

荐 结合论文看Youtube推荐系统中召回和排序的演进之路（中）篇

11个编程接单的网站，你有技术就有收入，有收入就有女朋友《男盆友》

身为程序员——你还不知道这十几个网站？

让微信 8.0 「裂开」「炸弹」的特效代码来了

35岁的程序员：第20章，解脱

在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

无法应用 CSS，可能是因为 Bootstrap

不含当前目录的相对路径

是否可以将 HTML 插入 Wix 模板？

使用 html 和 jQuery 动态加载标签，并输入 Java 的输入

无法使输入类型=日期必填

如何使用 VBA 从网络下载表格？

为什么计数器没有增加

子级没有渲染父级的 %height 吗？[重复]

电话号码验证包含 +** ***-***-****（后面加上两位数的国家代码和 10 位数的手机号码）

jQuery Grid css 无法在 .net core 2 中加载

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站