vue实现数据同步以及数据双向绑定的简单原理

最新推荐文章于 2024-08-23 12:25:46 发布

小火柴FE

最新推荐文章于 2024-08-23 12:25:46 发布

阅读量2.5k

点赞数 1

分类专栏： Vue.js 文章标签：数据绑定 vue

本文为博主原创文章，欢迎转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/weixin_42429672/article/details/96630091

版权

本文简要介绍Vue框架如何实现数据同步和双向绑定。通过创建Vue实例、设置数据和使用Proxy对象监听数据变化，模拟数据同步过程。在双向绑定方面，利用v-model结合render函数实现表单数据与视图的实时同步。

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

前言

vue框架使用起来十分的方便，因为不用过多地去关注DOM的操作，大部分只需要关注视图层以及数据的变化，但是它是怎么实现数据同步以及双向绑定的呢，以下是我简单的概述，因为我也刚入门没有多久，所以写下这篇文章加深自己对vue的理解，文章若有错误，可以随时指正。

数据同步

首先看看vue是怎么实现数据同步的：
1.创建一个vue实例
2.给el属性设置一个接管范围，也就是vue实例在这个区域才有作用
3.设置数据
4.在html中使用插值来绑定数据
5.数据变更后，同步到html中，然后渲染到界面

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
	<div id="app">{
   {
    message }}</div>

	<!-- 引用Vue库 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		let app = new Vue({
   
			el: "#app",// vue实例接管的区域
			data: {
   
				message: "Hello Vue!"
			}
		})

		// 2s后数据变更
		setTimeout(() => {
   
			app.message = "bye vue!";
		}, 2000);

	</script>
</body>

</html>

那么按照这个思路，可以借助ES6的一个对象Proxy来模拟这个过程：

获取DOM，设置接管范围====>模拟el

let el = document.querySelector('#app');

最低0.47元/天解锁文章

小火柴FE

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录