“Vue从入门到实战:虚拟DOM”的版本间的差异
来自CloudWiki
(创建页面,内容为“==DOM== 元素、文本等,是作为一个个DOM节点而存在的,对元素、文本的操作就是对DOM节点的操作。 ==虚拟DOM== 每个元素都是一…”) |
|||
第7行: | 第7行: | ||
高效地更新所有这些节点会是比较困难的,不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么,这可以是在一个模板里: | 高效地更新所有这些节点会是比较困难的,不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么,这可以是在一个模板里: | ||
− | <h1>{{ blogTitle }}</h1> | + | <nowiki><h1>{{ blogTitle }}</h1></nowiki> |
或者一个渲染函数里: | 或者一个渲染函数里: | ||
− | render: function (createElement) { | + | <nowiki>render: function (createElement) { |
return createElement('h1', this.blogTitle) | return createElement('h1', this.blogTitle) | ||
− | } | + | }</nowiki> |
在这两种情况下,Vue 都会自动保持页面的更新,即便 blogTitle 发生了改变。 | 在这两种情况下,Vue 都会自动保持页面的更新,即便 blogTitle 发生了改变。 | ||
第19行: | 第19行: | ||
作为前端框架,必然要考虑DOM渲染效率的问题,Vue.js 在DOM之上增加了一个抽象层来解决渲染效率问题,这就是虚拟DOM. | 作为前端框架,必然要考虑DOM渲染效率的问题,Vue.js 在DOM之上增加了一个抽象层来解决渲染效率问题,这就是虚拟DOM. | ||
− | + | 虚拟DOM使用普通的JS对象来描述DOM元素。每一个虚拟节点都是一个VNode的实例。 | |
+ | |||
+ | Vue在更新真实DOM前,会比较更新前后虚拟DOM结构中有差异的部分,然后采用异步更新队列的方式将差异部分更新到真实DOM中。 |
2021年2月20日 (六) 01:50的最新版本
DOM
元素、文本等,是作为一个个DOM节点而存在的,对元素、文本的操作就是对DOM节点的操作。
虚拟DOM
每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。
高效地更新所有这些节点会是比较困难的,不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么,这可以是在一个模板里:
<h1>{{ blogTitle }}</h1>
或者一个渲染函数里:
render: function (createElement) { return createElement('h1', this.blogTitle) }
在这两种情况下,Vue 都会自动保持页面的更新,即便 blogTitle 发生了改变。
作为前端框架,必然要考虑DOM渲染效率的问题,Vue.js 在DOM之上增加了一个抽象层来解决渲染效率问题,这就是虚拟DOM.
虚拟DOM使用普通的JS对象来描述DOM元素。每一个虚拟节点都是一个VNode的实例。
Vue在更新真实DOM前,会比较更新前后虚拟DOM结构中有差异的部分,然后采用异步更新队列的方式将差异部分更新到真实DOM中。