Question

我正在浏览Vue.js的官方文档，并找到了this diagram关于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')

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

虚拟DOM重新渲染和修补

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

实际上，发生的事情是Vue构建了一个代表DOM的树（称为vTree），然后当你改变状态时，它会使用一种称为diffing算法的算法来比较前一个{ {1}}到现在的vTree，并尝试找出需要更改的页面部分以反映您视图中的状态。更改页面的一小部分以表示新状态称为vTree。

这是对虚拟DOM的高级概述，要使其高效运行是非常复杂的，这就是为什么像Vue这样的框架首先存在的原因。如果您有兴趣了解更多相关内容，请尝试查看Github上的Matt-Esch/virtual-dom，它可以更详细地解释这个概念。