汪图南
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • 介绍

    • 介绍和参考
  • 源码目录设计和架构设计

    • 设计
  • Rollup构建版本

    • Rollup基础知识
    • Vue中的Rollup构建
  • 从入口到构造函数整体流程

    • 整体流程
    • initGlobalAPI流程
    • initMixin流程
    • stateMixin流程
    • eventsMixin流程
    • lifecycleMixin流程
    • renderMixin流程
  • 响应式原理

    • 介绍
    • 前置核心概念
    • props处理
    • methods处理
    • data处理
    • computed处理
    • watch处理
    • 深入响应式原理
    • 依赖收集
    • 派发更新
    • nextTick实现原理
    • 变化侦测注意事项
    • 变化侦测API实现
  • 虚拟DOM和VNode

    • 虚拟DOM
    • VNode介绍
    • Diff算法
  • 组件化

    • 介绍
    • $mount方法
    • render和renderProxy
    • createElement
    • createComponent
    • 合并策略
    • update和patch
    • 组件生命周期
    • 组件注册
  • 编译原理

    • 介绍
    • compileToFunctions
    • parse模板解析
    • optimize优化
    • codegen代码生成
  • 扩展

    • 扩展
    • directive指令
    • filter过滤器
    • event事件处理
    • v-model
    • 插槽
    • Keep-Alive
    • Transition
    • Transition-Group
    • Vue.use插件机制
  • Vue-Router

    • 介绍
    • 路由安装
    • matcher介绍
    • 路由切换
    • 内置组件
    • 路由hooks钩子函数
  • Vuex

    • 介绍
    • Vuex安装
    • Vuex初始化
    • Vuex辅助API
    • Store实例API

介绍和参考

本篇Vue2.6.11源码分析文章由观看Vue.js源码全方位深入解析视频,阅读深入浅出Vue.js书籍以及参考其他Vue源码分析博客而来,阅读视频和书籍请支持正版。

Vue发展简史

  • 2013年7月,Vue.js在Github上第一次提交,此时名字叫做Element,后来被改名为Seed.js,到现在的Vue.js。
  • 2013年12月,Github发布0.6版本,并正式更名为Vue.js。
  • 2014年2月,在Hacker News网站上时候首次公开。
  • 2015年10月,Vue.js发布1.0.0版本。
  • 2016年10月,Vue.js发布2.0版本。
  • 2020年9月18日,Vue.js发布3.0版本。

Vue版本变化

Vue2.0版本和Vue1.0版本之间虽然内部变化非常大,整个渲染层都重写了,但API层面的变化却很小,对开发者来说非常友好,另外Vue2.0版本还引入了很多特性:

  • Virtual DOM虚拟DOM。
  • 支持JSX语法。
  • 支持TypeScript。
  • 支持服务端渲染ssr。
  • 提供跨平台能力weex。

正确理解虚拟DOM:Vue中的虚拟DOM借鉴了开源库snabbdom的实现,并根据自身特色添加了许多特性。引入虚拟DOM的一个很重要的好处是:绝大部分情况下,组件渲染变得更快了,而少部分情况下反而变慢了。引入虚拟DOM这项技术通常都是在解决一些问题,然而解决一个问题的同时也可能会引入其它问题,这种情况更多的是如何做权衡、如何做取舍。因此,一味的强调虚拟DOM在任何时候都能提高性能这种说法需要正确对待和理解。

核心思想:Vue两大核心思想是数据驱动和组件化,因此我们在介绍完源码目录设计和整体流程后,会先介绍这两方面。

最后更新时间: 2025/5/24 09:00
贡献者: wangtunan