vue3源码剖析之简单实现方法
前言
最近，由于我的第一个vue3 + ts的正式项目，已经进入验收阶段。听你们老说vue3、vue3的，我就想着去看看vue3到底和vue2有啥区别。🤷🏻♀️🤷🏻♀️🤷🏻♀️
文章主要阐述vue3的API用法，以及简单地实现一个vue3。带大家感受一下vue3与之前vue2的区别。以及简单带大家揭秘源码中vue3初始化的一个流程。
🍹准备工作
要想看看vue3内部的源码是咋搞得，首先跟vue2源码剖析一样，先从github上下一份源码到本地。
接着就是安装依赖：
yarn --ignore-scripts
在你执行命令的时候可能会遇到node版本过低的错误：
解决此问题可以升级自己的node版本，或者忽略该engine。
如果选择忽略的话可以设置
yarn config set --ignore-engines true
然后执行依赖安装。
依赖安装完成后，编译打包生成vuejs文件：
yarn dev
需要调试的话，可以在packages\vue\examples文件下建立测试文件。引用打包后的vue文件，可以应用packages\vue\dist\vue.global.js。
🍲vue3用法
vue3的特性我就不多阐述了，就vue3的用法而言，更倾向于函数式编程，通过对外暴露Vue中的createApp()API，以工厂函数的方式创建了一个应用程序实例。相比较vue2的new Vue实例，更加贴切。
在源码文件中，我们新建一个init.html文件。
<script src="../dist/vue.global.js"></script>
<body>
<div id="app">{{name}}</div>
<script>
const { createApp } = Vue
const app1 = createApp({
data() {
return {
name: 'clying'
}
},
setup() {
return {
name: 'deng'
}
}
}).mount('#app')
</script>
</body>
根据上例，我们可以看出vue3是即支持Composition API,也支持Options API，两者可以同时使用。
但是，我们可以看到在data和setup中，我同时使用了一个name变量进行赋值。那么页面中会展示哪一个呢？
3！2！1！上答案：
可以明显看出composition-api中setup优先级更高。
当然也可以在源码中的packages\runtime-core\src\componentPublicInstance.ts看到，通过switch先判断setup中的变量是否存在，然后再去判断data中的变量。所以setup中变量的优先级会高于data中的变量。
🍖实现
通过上面的用法，我们可以知道vue3中会对外暴露一个Vue变量，内部存在createApp、reactive等方法。
在此，我们先实现vue3的初始化框架。就createApp而言，它会接收用户传入的参数：data()、setup()等，最后进行实例挂载mount。所以在createApp中会接收一些参数options、内部还会存在mount方法。
const Vue = {
createApp(options) {
return {
mount(selector) { //解析、获取render、挂载
}
}
}
}
在mount中通过selector获取到宿主元素。
接下来就是对模板的编译，由于将template编译AST后，依旧要转成render函数。在此我们简化操作，在编译时直接返回一个render。
mount(selector) { //解析、获取render、挂载
const parent = document.querySelector(selector)
console.log(parent);
if (!options.render) {
// 编译返回render
options.render = this.compileToFunction(parent.innerHTML)
}
},
compileToFunction(template) {
return function render() {
const h = document.createElement('div')
h.textContent = this.name
return h
}
}
拿到render之后，执行它，将其添加到宿主元素中，将老的节点删除。
在执行render的时候，我们需要注意它的this指向。如果给它绑定data，那么它展示的就会使data中的name。
mount(selector) { //解析、获取render、挂载
const parent = document.querySelector(selector)
console.log(parent);
if (!options.render) {
// 编译返回render
options.render = this.compileToFunction(parent.innerHTML)
}
// 执行render
const el = options.render.call(options.data())
parent.innerHTML = ''
parent.appendChild(el)
},
可以看到页面上展示的是clying。反之，如果绑定的是options.setup()，那么页面上出现的就是deng。
对于vue3的用法，我们知道setup的优先级是高于data的。那我们可以使用代理啊，将两者的属性变量，通过代理的方式，糅合到一起，优先考虑setup。当访问相同name时，实际访问的就是setup中的name。
mount(selector) { //解析、获取render、挂载
const parent = document.querySelector(selector)
console.log(parent);
if (!options.render) {
// 编译返回render
options.render = this.compileToFunction(parent.innerHTML)
}
if (options.setup) {
this.setupState = options.setup()
}
if (options.data) {
this.data = options.data()
}
this.proxy = new Proxy(this, {
get(target, key) {
if (key in target.setupState) {
return target.setupState[key]
} else if (key in target.data) {
return target.data[key]
}// 还可能存在props、watch等其他同名变量
},
set(target, key, value, newVal) {
console.log(target, key, value, newVal);
}
})
// 执行render this.proxy就是整合setup和data的上下文
const el = options.render.call(this.proxy)
console.log(el, options.render);
parent.innerHTML = ''
parent.appendChild(el)
},
在proxy的get中，先看setup中是否存在目标属性，如果存在的话返回的就是setup中的属性变量，否则就是data中的。在渲染的时候，直接将整合的变量集传入即可。当然proxy中也会存在set方法，需要先代理，然后在外部获取变量做值得修改才能触发，在此有兴趣的同学可以自行研究哦！
总结
到此这篇关于vue3源码剖析之简单实现的文章就介绍到这了,更多相关vue3源码剖析内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
- 这篇文章主要介绍了源码分析系列之json_encode()如何转化一个对象，对json_encode()感兴趣的同学，可以参考下...2021-04-22
- 拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，不过这几年都是做移动端，一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始，看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里，感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下...2021-09-24
- Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识，感兴趣的朋友一起学习吧...2016-01-02
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目，下面文章内容附有官方文档链接，安装过程，需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了Android Studio如何查看源码并调试的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据，整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 这篇文章主要介绍了详解vue3 沙箱机制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
ASP.NET使用HttpWebRequest读取远程网页源代码
本文分享了一个使用HttpWebRequest读取远程网页的案例，供大家参考学习。...2021-09-22- privatestring[]GetMoc() { string[]str=newstring[3]; ManagementClassmcCpu=newManagementClass("win32_Processor"); ManagementObjectCollectionmocCpu=mcCpu.GetInstan...2020-06-25
- #********************************************************* #文件名称: function.php #功能描述: 新闻添加修改处理模块 #程序制作：留印(adleyliu) #联系qq ：143...2016-11-25
- 这篇文章主要介绍了.NET Core 源码编译的问题解析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-04-06