vue中数据代理与虚拟dom的关系(数据代理中是否使用到虚拟dom)

本文链接：https://blog.youkuaiyun.com/weixin_56597479/article/details/123438243

本文详细介绍了虚拟DOM的概念，包括其在Vue中的应用，如通过VNode进行DOM更新，并讲解了Vue的数据代理机制，如何通过Object.defineProperty()实现数据的双向绑定，使得操作vm对象时能实时反映到data中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虚拟dom

1.虚拟DOM的概念

虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分

2.vue中的虚拟DOM

vue中状态变化时，只能通知到组件，组件内部的变化需要通过虚拟DOM去进行比对与渲染

在vue中，我们使用模板来描述状态与DOM之间的映射关系。vue通过编译将模板转换成渲染函数，执行渲染函数就可以得到一个虚拟节点树，使用虚拟节点数就可以渲染页面

虚拟DOM在vue中主要提供与真实节点对应的虚拟节点vnode,然后需要将vnode和oldVnode进行比对，然后更新视图，对比两个虚拟节点的算法是patch算法

3.VNode

在vue中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自代表不同类型的DOM元素，vnode的作用主要是描述了怎样去创建DOM节点

vnode的几种类型

1.注释节点

2.文本节点

3.元素节点

4.组件节点

5.函数式组件

6.克隆节点

事实上，只有前三类节点会被创建并插入到DOM中

vnode有tag属性就是元素节点

没有tag属性就可以看isCommet属性，true代表注释节点，false就是文本节点了

各自的创建方法

元素 createElement

文本 createTextNode

注释 createCommet

通过appendChild方法插入到父元素下

删除的方法需要进行封装，原生的删除方法是removeNode,封装主要为了适应不同的平台，是删除操作在各个平台上都能正常的运行

此段转载于：https://blog.youkuaiyun.com/Goodbye_/article/details/116353745?ops_request_misc

数据代理

在这里插入图片描述

我们定义了两个对象 obj 和 obj2

然后通过Object.defineProperty() 方法给obj2的对象上面添加了一个属性 x 在配置对象中我们定义了get() 方法和 set() 方法

当我们访问obj2的x属性时触发get() 方法把obj.x的值返回给我们

当我们修改obj2.x的值时候触发了set() 方法把我们修改的值拿到并赋值给了obj.x

现在就实现了最简单的数据代理不管我们如何操作obj2.x的值它都会始终和obj.x的值保持一致

在我们知道了什么是数据代理之后我们来看看Vue中是如何实现数据代理的

标题Vue中的数据代理

            1.Vue中的数据代理：
                        通过vm对象来代理data对象中属性的操作（读/写）
            2.Vue中数据代理的好处：
                        更加方便的操作data中的数据
            3.基本原理：
                        通过Object.defineProperty()把data对象中所有属性添加到vm上。
                        为每一个添加到vm上的属性，都指定一个getter/setter。
                        在getter/setter内部去操作（读/写）data中对应的属性。

下面我们通代码来演示一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>名称：{{name}}</h2>
			<h2>地址：{{address}}</h2>
		</div>
	</body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'张三',
				address:'山东菏泽曹县'
			}
		})
	</script>
</html>