vue.js - 了解 Vue 实例的生命周期

Question

我正在浏览 Vue.js 的官方文档并找到了 this diagram关于 Vue 实例生命周期中的不同阶段和步骤。我了解Vue的基本特性，但我无法理解图中提到的许多阶段的含义。例如，“将模板编译成渲染函数”或“虚拟 DOM 重新渲染和修补”。我不知道它们是什么意思。

我知道文档中说您现在不需要完全理解所有内容，但我希望 Vue(或前端)专家可以用简单的语言简要解释这些步骤。

Answer 1

这一切都可能有点让人不知所措，这就是那些东西

渲染函数

当 Vue 编译您的 Vue 实例时，它会创建一个 render 函数，它是您的 HTML 的纯 JavaScript 表示。像这样:

new Vue({
  template: `<div>{{msg}}</div>`,
  data:{
    msg: 'Hello Vue
  }
}).$mount('#app')

实际上会变成这样:

new Vue({
  render: function(createElement) {
    return createElement('div', this.msg)
  },
  data: {
    msg: 'Hello Vue'
  }
}).$mount('#app')

这是一个 JSFiddle:https://jsfiddle.net/bvvbmpLo/

您不需要处理这些，Vue 会为您处理，而且大多数时候您不会发现自己编写渲染函数。然而，重要的是要了解 Vue 正在做一些幕后工作以用纯 JavaScript 表示您的模板。

虚拟 DOM 重新渲染和修补

你真的不需要知道这一点，但 Vue 使用虚拟 DOM，因为它更容易跟踪更改并决定 DOM 的哪些部分需要更新。

实际上，Vue 构建了一棵代表 DOM 的树(称为 vTree)，然后当您更改状态时，它使用称为 diffing 的东西该算法将之前的 vTree 与当前的 vTree 进行比较，并尝试找出需要更改页面的哪一部分以在您的 View 中反射(reflect)该状态.更改页面的一小部分以表示新状态称为 patching。

这是对虚拟 DOM 的相当高层次的概述，要使它有效地工作非常复杂，这就是像 Vue 这样的框架首先存在的原因。如果您有兴趣了解更多相关信息，请尝试查看 Matt-Esch/virtual-dom在 Github 上，它非常详细地解释了这个概念。