理解Vue实例的生命周期

Question

我正在阅读 Vue.js 的官方文档，并找到了有关 Vue 实例生命周期中不同阶段和步骤的图表。了解Vue的基本特性，但无法理解图中提到的许多阶段的含义。例如，“将模板编译为渲染函数”或“虚拟 DOM 重新渲染和补丁”。我不知道他们的意思。

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

Answer 1

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

渲染功能

当 Vue 编译您的 Vue 实例时，它会创建一个render function，它是您的 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 的树（称为 a vTree），然后当您更改状态时，它会使用称为diffing算法的东西，将之前vTree的状态与当前的状态进行比较vTree，并尝试找出哪个它需要更改页面的一部分以在您的视图中反映该状态。更改页面的一小部分以表示新状态称为patching。

这是虚拟 DOM 的一个非常高级的概述，让它有效地工作非常复杂，这就是为什么像 Vue 这样的框架首先存在的原因。如果您有兴趣了解更多相关信息，请尝试查看Github上的Matt-Esch/virtual-dom，它在更详细地解释这个概念方面做得很好。