vue3.x的源码学习

最新推荐文章于 2024-05-28 17:32:54 发布

92huahua

最新推荐文章于 2024-05-28 17:32:54 发布

阅读量204

点赞数

分类专栏： Vue 文章标签： vue vue3

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/111302156

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、clone源码：

git clone https://github.com/vuejs/vue-next.git

二、安装依赖

yarn --ignore-scripts

三、生成sourcemap文件，package.json

"dev":"node scrpts/dev.js --sourcemap"

四、编译

yarn dev

五、vue3.X api

createApp 创建app实例 renderer渲染器的方法

renderer createRenderer的工厂函数，这里面的参数是dom操作，需要创建一个renderer实例

createRenderer 接收options返回一个对象，包含渲染器

render 将虚拟dom 转换成真实dom放到container中，

createAppAPI 接收一个render函数，return一个createApp函数，传进来一个rootComponent (宿主元素)

mount 挂载app实例，会调用传进来的render函数，将vnode转成真实dom 并挂在宿主元素中

setupRenderEffct //副作用函数

patch 将虚拟dom 转换成真实dom 的函数

六、基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>{{count}}</div>
    <comp></comp>
</body>
<script src="../dist/vue.global.js"></script>
<script>
    const { createApp } = Vue
    //创建app实例
    createApp({
        data() {
            return {
                count: 0
            }
        }
    })
    //创建组件
    .component ('comp',{
        template:'<div>我是comp组件</div>   '
    })
    //使用路由
    .use(Router)
    .use(store)
</script>

</html>

92huahua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3.x的源码学习

一、迁出源码：git clone https://github.com/vuejs/vue-next.git二、安装依赖yarn --ignore-scripts三、生成sourcemap文件，package.json"dev":"node scrpts/dev.js --sourcemap"四、编译yarn dev
复制链接

扫一扫