vue3源码学习

2021-7-16 17:17:17

#vue

31

前言

该博文是我对vue3.0源码学习的笔记。

参考资料：

Vue3源码解析 Deep Dive with Evan You Vue 3响应式原理

github上不错的笔记博客 muwoo大大的github博客 Vue技术内幕

AST抽象语法树

这个东西倒是在编译原理的课上也有学过，看样子知识都是相同的啊

  • 作用 用于将模版语法转化为正常的HTML语法
  • 过程
    • 模版语法->AST抽象语法树->正常的HTML语法
  • 本质
    • 在vue中是一个JS对象
  • 抽象语法树和虚拟Dom的关系
    • 模版语法->AST抽象语法树->生成->渲染函数h->执行生成->虚拟Dom->经过diff->界面

虚拟Dom

  • 也是一个Js对象
<div>Hello</div>
{
  tag:\"div\",
  children:[
    {
      text:\"Hello\"
    }
  ]
}
  • 当组件更新时，render函数会创建新的VNode，并且将新的Vnode和旧的Vnode传到Vue中进行比较。

持续更新中....

Github登录