Vue.js中什么是get()、set()方法、虚拟DOM

最新推荐文章于 2024-04-02 10:13:11 发布

蓝纹绿茶

最新推荐文章于 2024-04-02 10:13:11 发布

阅读量1k

点赞数

分类专栏： vue.js 文章标签： vue.js

原文链接：https://www.cnblogs.com/yjd-05/p/13397707.html

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

getter和setter的理解

vue的每个属性都有两个对应的get和set方法。**get为取值方法，set为赋值方法。**当我们调用对象的属性时，会进入到 get.属性(){…} 中，先判断对象是否有这个属性，如果没有，那么就添加一个name属性，并给它赋值；如果有name属性，那么就返回name属性。可以把get看成一个取值的函数，函数的返回值就是它拿到的值。

虚拟DOM

什么是虚拟DOM

在Vue.js 2.0版本中引入了 Virtual DOM 的概念。简单来说，可以把Virtual DOM理解为一个简单的JS对象，并且最少包含标签名（tag）、属性（attrs）和子元素对象（children）三个属性。不同的框架对这三个属性的命名会有所差别。

虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的DOM操作。例如，一个ul标签下有很多个li标签，其中只有一个li标签有变化，这种情况下如果使用新的ul去替代旧的ul，会因为这些不必要的DOM操作而造成性能上的浪费。

为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他不需要改动的DOM元素。

其实，虚拟DOM在Vue.js中主要做了两件事情：

提供与真实DOM节点所对应的虚拟节点VNode
将虚拟节点VNode和旧虚拟节点oldVNode进行对比，然后更新视图

虚拟DOM
具备跨平台优势，由于Virtual DOM 是以JavaScript对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node等。
操作DOM慢，JS运行效率高，可以将DOM对比操作放在JS层，提高效率。因为DOM操作的执行速度远不如JavaScript运算速度快，因此，把大量的DOM操作搬运到JavaScript中，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。Vritual DOM本质上就是在JS和DOM之间做了一个缓存，JS只操作Virtual DOM，最后把变更写入到真实DOM。
提高渲染性能，Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

原文地址：
https://www.cnblogs.com/yjd-05/p/13397707.html