我正在浏览 Vue.js 的官方文档并找到了 this diagram关于 Vue 实例生命周期中的不同阶段和步骤。我了解Vue的基本特性,但我无法理解图中提到的许多阶段的含义。例如,“将模板编译成渲染函数”或“虚拟 DOM 重新渲染和修补”。我不知道它们是什么意思。
我知道文档中说您现在不需要完全理解所有内容,但我希望 Vue(或前端)专家可以用简单的语言简要解释这些步骤。
最佳答案
这一切都可能有点让人不知所措,这就是那些东西
渲染函数
当 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 上,它非常详细地解释了这个概念。
关于vue.js - 了解 Vue 实例的生命周期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47484700/