vue数据驱动

date
Nov 17, 2021
slug
vue-data
status
Published
tags
Vue
type
Post
summary
vue数据驱动

数据驱动

new vue的时候发生了什么

Vue是个构造函数
首先检查vue有没有被合适的实例化，然后调用init方法
Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher (主要在init里面)

vue实例挂载

vue中实例挂载是通过$mount实现的，带有complier版本的实际上用了原型链上的$mount方法，并且重写了这个方法，无论是el还是template都会在这个方法中转换为render方法，所有 Vue 的组件的渲染最终都需要 render 方法，无论我们是用单文件 .vue 方式开发组件，还是写了 el 或者 template 属性，最终都会转换成 render 方法，那么这个过程是 Vue 的一个“在线编译”的过程，它是调用 compileToFunctions 方法实现的
mountComponent 核心就是先实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法，在此方法中调用 vm._render 方法先生成虚拟 Node，最终调用 vm._update 更新 DOM。
Watcher 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数，这块儿我们会在之后的章节中介绍。
函数最后判断为根节点的时候设置 vm._isMounted 为 true， 表示这个实例已经挂载了，同时执行 mounted 钩子函数。

总结

  1. mount方法(把el或者是template转换成render)继承了Vue实例上的$mount方法
  1. $mount调用了mountComponent方法（这个方法实现了监听器，并挂载虚拟dom），实现了beforeUpdate和mounted两个钩子
  1. mountComponent 方法的逻辑也是非常清晰的，它会完成整个渲染工作，接下来我们要重点分析其中的细节，也就是最核心的 2 个方法：vm._render 和 vm._update。

render

vm._render 最终是通过执行 createElement 方法并返回的是 vnode，它是一个虚拟 Node。

Vritual Dom

为什么

因为真实的dom开销巨大

是什么

虚拟dom就是是用js对象来描述一个真实dom节点。在vue中 vnode是用class实现的，并且借鉴了一个库叫做snabbdom
其实 VNode 是对真实 DOM 的一种抽象描述，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等，其它属性都是用来扩展 VNode 的灵活性以及实现一些特殊 feature 的。由于 VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，因此它是非常轻量和简单的。
Virtual DOM 除了它的数据结构的定义，映射到真实的 DOM 实际上要经历 VNode 的 create、diff、patch 等过程。那么在 Vue.js 中，VNode 的 create 是通过之前提到的 createElement 方法创建的.

CreateElement

  • 首先用了createElement 方法， 该方法是对_createElement的封装，处理了一些参数
  • _createElement流程较多，分析规范化子数组和创建vnode（其实就是做了一些情况处理加上实例化vnode这个类）
  • createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个 VNode，这样就形成了一个 VNode Tree，它很好的描述了我们的 DOM Tree。
      • 回到 mountComponent 函数的过程，我们已经知道 vm._render 是如何创建了一个 VNode，接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来，这个过程是通过 vm._update 完成的，接下来分析一下这个过程。

      update

      Vue 的 _update 是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候

© dana 2023 - 2025