vue运行机制

vue运行机制

vue核心的执行过程主要分为这几个阶段：

1）模板编译：生成可复用的render函数

2）响应式：通过Object.definedProperty监听到对象属性的get和set，实现双向绑定

3）初始渲染：执行render函数，访问data中的值，会被get监听，调用patch方法生成vdom

4）数据改变：数据发生改变会触发set，会进行更新re-render，通过patch方法对新旧vnode对比，更新视图

Vue 如何解析模板

• 模板是什么

  • 本质：模板就是字符串

  • 与html格式很像，但是模板中是有逻辑的，可以嵌入JS变量，如v-if, v-for等

  • 视图最终还是需要由模板生成 html 来显示

  • 模板必须先要转换成JS代码

    • 有逻辑(v-if, v-for)，必须用JS才能实现(图灵完备)

    • 转换为html渲染页面，必须用JS才能实现

    • 因此，模板要转换成render函数

• render函数

  • render函数包含了模板中所有的信息，返回 vnode，解决了模板中的逻辑(v-if, v-for)问题

  • 如何找到最终生成的render函数
    找到vue源码，src/compiler/codegen/index.js，generate函数的render返回值

• render函数与vdom

  • 模板生成 html：vm._c

  • vm._c 和 snabbdom 中的 h 函数的实现很像，都是传入标签，属性，子元素作为参数

  • Vue.js 的 vdom 实现借鉴了 snabbdom

  • updateComponent 中实现了 vdom 的 patch

  • 页面首次渲染执行 updateComponent

  • data 中每次修改属性，都会执行 updateComponent

Vue运行机制

第一步：解析模板成render函数：

• 首先要知道render函数的生成是在打包的时候，为什么呢？webpack打包的时候我们使用到了vue-template-compiler这个loader，它的作用是将template编译成render函数，所以说编译是第一步；响应式监听是在代码执行的时候。

• 编译过程compile分为parse，optimize，generate三部分

  • parse：将template解析成抽象语法树

  • optimize：每次重新渲染中，DOM中有一部分是不需要改变的，我们称之为static sub-trees，这一部分可以分离出来存储成常量，然后re-render的过程中也不再去渲染它，以及后边的patch过程也不再管它，比如我们常见的html的header等基本不会改变。

  • generate：generate过程会根据ast生成虚拟dom树，即vnode(在代码中是${code})，另外还会生成optimize中的静态树。

  function generate (
    ast: ASTElement | void,
    options: CompilerOptions
  ): CodegenResult {
       
    const state = new CodegenState(options)
    const code = ast ? genElement(ast, state) : '_c("div")'
    return {
       
      render: `with(this){return ${
         code}}`,
      staticRenderFns