vue3.0源码,vue3开发
对于源代码的重要性，我相信不用多说什么，尤其是对于Vue框架。一般面试官在面试的时候都会或多或少的考察一下源代码的内容。下面这篇文章主要介绍vue3源代码分析简单实现的相关信息，有需要的朋友可以参考一下。
目录
序言准备vue3使用实现总结
前言
最近由于我的第一台vue3 ts正式立项，已经进入验收阶段。你总是说vue3和vue3，我就想看看vue3和vue2有什么区别。
本文主要阐述了vue3的API用法，并简单实现了一个vue3。我们来感受一下vue3和之前的vue2的区别。并且简单带你揭秘一个在源码中vue3初始化的过程。
准备工作
要看vue3内部的源代码是怎么回事，首先就像vue2的源代码分析一样，先从github下载下一个源代码到本地。
然后安装依赖项：
纱线忽略脚本
执行该命令时，您可能会遇到node版本太低的错误：
要解决这个问题，您可以升级您的node版本或忽略引擎。
如果您选择忽略它，您可以设置它。
纱线配置设置-忽略-引擎真
然后执行相关安装。
依赖项安装完成后，编译打包生成vuejs文件：
纱线开发
如果调试需要，可以在packages\vue\examples文件下创建一个测试文件。packages \ vue \ dist \ vue . global . js可以应用于引用的vue文件。
vue3用法
vue3的特点我就不细说了。就vue3的用法来说，更倾向于函数式编程。通过在Vue中公开createApp()API，以工厂函数的形式创建了一个应用实例。相比vue2的新Vue例子，更贴切。
在源文件中，我们创建一个新的init.html文件。
脚本src=./dist/vue . global . js /脚本
身体
div id= app“{ name } }/div
脚本
const { createApp }=Vue
const app1=createApp({
data() {
返回{
名称：“克莱因”
}
},
setup() {
返回{
姓名：邓
}
}
}).挂载(#app)
/脚本
/body
根据上面的例子，我们可以看到vue3同时支持Composition API和Options API，可以同时使用。
但是，我们可以看到，在数据和设置中，我使用了一个名称变量进行赋值。那么页面中会显示哪一个呢？
3!2!1!关于答案：
可以清楚的看到，setup在composition-api中的优先级更高。
当然，你也可以在源代码的packages \ runtime-core \ src \ componentpublicinstance . ts中看到。可以先判断setup中的变量是否存在，再判断data中的变量。因此，设置中的变量比数据中的变量具有更高的优先级。
实现
通过上面的用法，我们可以知道vue3中会暴露一个Vue变量，里面有createApp、reactive等方法。
在这里，我们首先实现vue3的初始化框架。就createApp而言，它会接收用户传入的参数：data()、setup()等。最后挂载实例。所以createApp中会接收到一些参数选项，里面会有一个mount方法。
const Vue={
createApp(选项){
返回{
挂载(选择器){//解析，获取渲染，挂载
}
}
}
}
通过mount中的选择器获取主机元素。
下一步是模板的编译。模板编译成AST后，还需要转换成render函数。这里，我们简化了操作，在编译时直接返回一个渲染。
挂载(选择器){//解析，获取渲染，挂载
const parent=document . query selector(选择器)
console.log(父)；
如果(！options.render) {
//编译并返回渲染
options . render=this . compiletofunction(parent . innerhtml)
}
},
compileToFunction(模板){
返回函数render() {
const h=document . createelement( div )
h.textContent=this.name
返回h
}
}
获得渲染后，执行它，将其添加到主机元素，并删除旧节点。
在执行渲染时，我们需要注意它的这个指向。如果将数据绑定到它，它显示的内容将在数据中产生名称。
挂载(选择器){//解析，获取渲染，挂载
const parent=document . query selector(选择器)
console.log(父)；
如果(！options.render) {
//编译并返回渲染
options . render=this . compiletofunction(parent . innerhtml)
}
//执行渲染
const El=options . render . call(options . data())
parent.innerHTML=
parent.appendChild(el)
},
你可以看到页面上显示的是clying。相反，如果options.setup()被绑定，邓就会出现在页面上。
对于vue3的使用，我们知道setup的优先级高于data。那么我们可以使用代理，通过代理将两者的属性变量结合起来，优先设置。当访问相同的名称时，实际访问的是setup中的名称。
挂载(选择器){//解析，获取渲染，挂载
const parent=document . query selector(选择器)
console.log(父)；
如果(！options.render) {
//编译并返回渲染
options . render=this . compiletofunction(parent . innerhtml)
}
if (options.setup) {
this.setupState=options.setup()
}
if (options.data) {
this.data=options.data()
}
this.proxy=新代理(this，{
get(target，key) {
if(键入target.setupState) {
return target.setupState[key]
} else if (key in target.data) {
返回target.data[key]
}//可能还有道具、手表等其他同名变量。
},
set(target，key，value，newVal) {
console.log(target，key，value，new val)；
}
})
//执行render this.proxy是为了整合设置和数据的上下文。
const El=options . render . call(this . proxy)
console.log(el，options . render)；
parent.innerHTML=
parent.appendChild(el)
},
在代理的get中，首先看目标属性在setup中是否存在。如果存在，它将在setup中返回属性变量，否则它将在data中。渲染时，可以直接传入集成变量集。当然proxy里会有一个set方法，需要先表示出来，然后外部修改变量才能触发。有兴趣的同学可以在这里自学！
总结
关于vue3源代码分析的简单实现的这篇文章就到这里了。更多相关vue3源代码分析内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。