码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Vue源码总结


    1,根据vue工程package.json配置文件查看scripts命令,找到build命令执行的js文件

    2,根据构建执行的js文件继续跟进,找到主入口文件

    3,从主入口文件直接分析主干代码,追踪export的Vue对象

    4,跟进到最内层,发现Vue对象其实就是一个构造函数,构造函数内调用了_init()方法。因此在我们new Vue(options)的时候,实例化Vue执行就会调用此方法

    5,在vue加载完成之后,初始化了initMixin, stateMixin, eventsMixin, lifecycleMixin, renderMixin这5个方法

    6,initMixin中定义了_init函数,这个函数的核心流程是:

    合并options配置挂载到vm.$options;

    调用initLifecycle初始化vm.$parent, vm.$root, vm.$children, vm.$refs 等属性值;

    调用initEvents初始化事件系统,实际上是v-on和@的注册的事件;

    调用initRender初始化渲染,通过执行createElement函数执行并返回虚拟DOM;

    调用beforeCreate钩子;

    调用initInjections函数初始化父子组件的inject和provide(二者成对出现);

    调用initState初始化state, props, methods, computed, watch等,将data, props都挂载到vm._data, vm._props上,设置访问数据代理,访问this.xx就是访问vm.xx;

    调用initProvide函数,同initInjections;

    调用created钩子。

    7,stateMixin中,对_data(vm.$data), _props(vm.$props)使用 Object.defineProperty 添加响应式

    8,eventsMixin中,在Vue原型上定义$on, $once, $off, $emit 事件方法,并返回vm

    9,lifecycleMixin中,在Vue原型上定义 _update, $forceUpdate, $destroy方法

    10,renderMixin中,在Vue原型上定义$nextTick方法和_render方法(该方法会调用vm.$createElement创建虚拟DOM)

  • 相关阅读:
    QT软件开发-基于FFMPEG设计视频播放器-支持软解与硬解(二)
    MySQL入门指南4(查询进阶,外连接)
    nodejs+vue 校园通勤车-计算机毕业设计
    【蓝桥杯】蓝桥杯双周赛第二场ABCD题
    单目标应用:世界杯优化算法(World Cup Optimization,WCO)求解单仓库多旅行商问题SD-MTSP(可更改旅行商个数及起点)
    Linux软件管理之RPM的五种操作模式—这篇总结你一定能读懂
    存档-链表设计JS/TS版
    Java(面试题准备(非技术面)(仅供参考))
    算法-3.无重复字符的最长子串
    438页19万字农牧业综合服务信息化减灾应急建设方案
  • 原文地址:https://blog.csdn.net/wjs0406/article/details/134049881
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号