Vue之双向绑定

最新推荐文章于 2022-09-14 13:26:51 发布

shandamengcheng

最新推荐文章于 2022-09-14 13:26:51 发布

阅读量244

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/shandamengcheng/article/details/104631431

版权

本文详细介绍了Vue的双向数据绑定原理，包括响应式数据的实现方式，如何添加响应式数据，以及异步DOM更新机制。Vue通过Object.defineProperty转换数据属性为setter和getter实现数据变化与DOM的同步。当数据变化时，会通知Watcher实例，触发组件重新渲染。文章还讨论了Event Loop、任务队列、微任务和宏任务，以及Vue的nextTick在数据更新中的作用。

摘要由CSDN通过智能技术生成

Vue之双向绑定

双向数据绑定

将DOM与Vue实例的data数据绑定到一起，彼此间互相影响。

数据的变化会引起DOM的改变
DOM的改变也会引起数据的变化

原理

当把一个普通的Javascript对象传入Vue实例作为data选项时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty( )来把每个属性转为setter和getter。这些setter和getter对用户来说不可见，但是在内部会让Vue能够追踪依赖，在属性被访问和修改时通知变更。
每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后，当依赖项的sette触发时，会通知watcher，从而使它关联的组件重新渲染。

什么是响应式：简单来说，当你的数据发生变化时，视图也进行相应的更新。

响应式数据

只有data中的数据（程序创建时data里的属性）才是响应式的，动态添加进来的数据默认为非响应式的。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id ="app">
		<p>{
  {stu}}</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data: {
				stu: {
					name:"Jona",
					age:19
				}
			}
		})
		vm.stu.width = "666";
		Vue.set(vm.stu,"gender","male");
	</script>
</body>
</html>

此时，如果在console中修改stu.width的值，视图不会发生更新。

这主要因为，

最低0.47元/天解锁文章

shandamengcheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之双向绑定

Vue之双向绑定双向数据绑定将DOM与Vue实例的data数据绑定到一起，彼此间互相影响。数据的变化会引起DOM的改变DOM的改变也会引起数据的变化原理当把一个普通的Javascript对象传入Vue实例作为data选项时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty( )来把每个属性转为setter和getter。这些setter和getter...
复制链接

扫一扫

专栏目录