上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖
楼主: youwh - 

边喝热水边学Vue源码之三-找到入口

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-21 21:38
  • 签到天数: 53 天

    [LV.5]常住居民I

    7

    主题

    34

    回帖

    68

    积分

    初级工程师

    积分
    68

    新人报道喜迎中秋

    发表于 2023-11-8 21:03:30 | 显示全部楼层 | 阅读模式

    从入口开始

    据说Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/entry-runtime-with-compiler.js

    Vue 的入口,由于import Vue from './runtime/index',它定义在 src/platforms/web/runtime/index.js

    说实话这章没怎么听懂,应该还是js的代码量积累不够,没有足够的项目支撑看起来比较困难,这里的内容以后再补充吧。

    原型上挂方法

    说说自己学到的东西,见下面的代码片段

    initMixin(Vue)
    stateMixin(Vue)
    eventsMixin(Vue)
    lifecycleMixin(Vue)
    renderMixin(Vue)

    下面是initMixin方法的片段

    export function initMixin (Vue: Class<Component>) {
      Vue.prototype._init = function (options?: Object) {
        const vm: Component = this
        // a uid
        vm._uid = uid++

    这里给vue添加方法的方式时通过原型链挂载,这个在道总之前的将油猴脚本的时候花了很大时间强调过的,在这里遇到了,不懂得可以取看看他得帖子[油猴脚本开发指南]原型与原型链-油猴中文网 (tampermonkey.net.cn)](https://bbs.tampermonkey.net.cn/thread-744-1-1.html),(顺利碰瓷大佬)还说到了ES5的语法比ES6更容易实现原型上的方法挂载

    这里提到了什么原型方法和静态方法,还不是很清楚,后来弄懂了再来补充,算是给自己挖了一个坑。

    数据驱动

    听他讲了一堆,内容都没听懂,以后慢慢加深理解,先抄一下大纲:new Vue 发生了什么,Vue实例挂载的实现,render, Virtual DOM,createElement,update。
    数据驱动 | Vue.js 技术揭秘 (ustbhuangyi.github.io)

    数据驱动的意思是在使用vue框架的页面上内容的修改是因数据发生了变化,而普通的
    网页修改数据是通过Jquery直接修改dom,vue大大简化了代码量。

    1. 每个vue文件都会算是一个vue对象,里面的数据推荐使用data函数而不是data对象;
    2. dom操作很吃性能,所以推荐使用虚拟dom,而且虚拟dom没有那么多的属性,只保留了关键的属性;
    3. 一些混淆的名词,node,element,dom元素,node节点;
    4. 先把vue风格的标签转成node对象,然后加上一些属性和事件,再把这些node节点转为HTML中的标签就称为渲染;
    5. dom由于数据驱动有生成和更新,后面会重新刷新标签内容,就需要一个观察者watcher来监控操作
    6. 查看源码并不需要从GitHub上下载,找一个开发的vue项目里面就有vue的源码,路径如下\node_modules\vue\src

    基础不牢,地动山摇。这三个小时花的不值呀,找哥哥吹牛逼都比这快乐。

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5959

    回帖

    6758

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6758

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-11-8 21:12:54 | 显示全部楼层
    vue2源码最复杂的地方就是mountPatch那部分了...
    跟组件组合到一起贼几把复杂...
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-21 21:38
  • 签到天数: 53 天

    [LV.5]常住居民I

    7

    主题

    34

    回帖

    68

    积分

    初级工程师

    积分
    68

    新人报道喜迎中秋

    发表于 2023-11-9 18:26:16 | 显示全部楼层
    李恒道 发表于 2023-11-8 21:12
    vue2源码最复杂的地方就是mountPatch那部分了...
    跟组件组合到一起贼几把复杂... ...

    现在我都看都没看明白,继续搞吧,后悔代码敲少了。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-21 21:38
  • 签到天数: 53 天

    [LV.5]常住居民I

    7

    主题

    34

    回帖

    68

    积分

    初级工程师

    积分
    68

    新人报道喜迎中秋

    发表于 2023-11-9 19:32:28 | 显示全部楼层
    李恒道 发表于 2023-11-8 21:12
    vue2源码最复杂的地方就是mountPatch那部分了...
    跟组件组合到一起贼几把复杂... ...

    说实话,要不我看过教程,mount和path这两个部分真把它们当成一个了,还寻思这是啥,哥哥我现在不知道是继续看下去还是写几个vue项目巩固一下,不过做难事必有所的。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表