当前位置： 首页 > news >正文

VUE数据双向绑定原理解析

news 2026/5/22 6:00:39

VUE数据双向绑定原理解析

在Vue.js中，数据双向绑定是一项非常强大的功能。它使开发者能够轻松地将模板与数据进行动态关联，实现了页面和数据之间的实时同步更新。本文将深入探讨VUE中数据双向绑定的原理，并通过代码示例演示其工作机制。

1. 数据劫持（Object.defineProperty）

VUE使用了JavaScript对象属性的Object.defineProperty()方法来实现数据劫持。这个方法可以拦截对对象属性的访问、赋值及删除操作，并触发相应的回调函数。

下面是一个简单示例：

const obj = {};
let value;Object.defineProperty(obj, 'name', {get() {console.log('获取name');return value;},set(newValue) {console.log('设置name为', newValue);value = newValue;}
});obj.name; // 获取name
obj.name = 'John'; // 设置name为 John

在Vue中，每个组件都有一个私有data对象用于存储状态数据。当创建组件实例时，Vue会遍历该对象并使用Object.defineProperty()定义每个属性。

2. 监听器（Watcher）和依赖收集

VUE还引入了监听器（Watcher）和依赖收集来跟踪视图与状态之间的关系。

  • Watcher：每个模板表达式都会对应一个Watcher对象。当表达式中的数据发生变化时，Watcher将触发视图更新。
  • 依赖收集：在模板编译阶段，VUE会分析模板中的指令和插值表达式，并创建一个虚拟DOM树。同时，Vue也会为每个属性创建一个Dep（Dependency）对象来存储与之相关的所有Watcher。

下面是一段简化版的代码示例：

class Dep {constructor() {this.subscribers = [];}addSubscriber(subscriber) {if (subscriber && !this.subscribers.includes(subscriber)) {this.subscribers.push(subscriber);}}notify() {this.subscribers.forEach(sub => sub.update());}
}class Watcher {constructor(vm, exp, updater) {this.vm = vm;this.exp = exp;this.updater = updater;Dep.target = this;// 访问data属性以建立关联this.vm[this.exp];Dep.target = null;}update() {this.updater.call(this.vm);}
}function observe(obj) { if (!obj || typeof obj !== 'object') return; Object.keys(obj).forEach(key => { let value = obj[key]; Object.defineProperty(obj, key, { get() { return value; }, set(newValue) { if (value !== newValue) {  value = newValue;  const dep = new Dep();  dep.notify();}   }   })   observe(value); //递归遍历子属性})   
}class Vue {constructor(options) {this.$data = options.data;observe(this.$data);}
}

3. 实现双向绑定

通过上述的数据劫持和依赖收集，我们可以实现VUE中的双向数据绑定。

下面是一个简单示例：

<!DOCTYPE html>
<html>
<head><title>VUE 双向绑定原理</title>
</head>
<body><div id="app"><input type="text" v-model="message"><p>{{ message }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>  new Vue({el: '#app',data: {message: 'Hello, World!'}
});</script> </body>
</html>

在这个示例中，当用户在输入框中键入文本时，v-model指令将自动更新Vue实例中的message属性。反之亦然 - 当您更改Vue实例的message属性时，输入框中显示的文本也会相应更新。

结论

VUE通过使用数据劫持和依赖收集来实现数据双向绑定。借助于Object.defineProperty()方法以及监听器（Watcher）和依赖收集机制，VUE能够保证视图与状态之间始终保持同步。希望通过本文对VUE数据双向绑定原理有了更深入的了解。

相关文章：

VUE数据双向绑定原理解析

VUE数据双向绑定原理解析 在Vue.js中&#xff0c;数据双向绑定是一项非常强大的功能。它使开发者能够轻松地将模板与数据进行动态关联&#xff0c;实现了页面和数据之间的实时同步更新。本文将深入探讨VUE中数据双向绑定的原理&#xff0c;并通过代码示例演示其工作机制。 1.…...

编程日记 2023/8/30 15:39:24

SSM商城项目实战：订单管理

SSM商城项目实战&#xff1a;订单管理 在SSM商城项目中&#xff0c;订单管理是一个非常重要的功能模块。本文将详细介绍订单管理的实现思路和步骤代码。 实现SSM商城项目中订单管理功能的思路如下&#xff1a; 设计数据库表结构&#xff1a;根据订单管理的需求&#xff0c;设计…...

编程日记 2023/8/30 15:38:22

SELinux 入门 pt.2

哈喽大家好&#xff0c;我是咸鱼 在《SELinux 入门 pt.1》中&#xff0c;咸鱼向各位小伙伴介绍了 SELinux 所使用的 MAC 模型、以及几个重要的概念&#xff08;主体、目标、策略、安全上下文&#xff09; 我们还讲到&#xff1a; 对于受 SELinux 管制的进程&#xff0c;会先…...

编程日记 2023/8/30 15:37:21

函数(个人学习笔记黑马学习)

1、函数定义 #include <iostream> using namespace std;int add(int num1, int num2) {int sum num1 num2;return sum; }int main() {system("pause");return 0; } 2、函数的调用 #include <iostream> using namespace std;int add(int num1, int num2…...

编程日记 2023/8/30 15:36:18

《Flink学习笔记》——第五章 DataStream API

一个Flink程序&#xff0c;其实就是对DataStream的各种转换&#xff0c;代码基本可以由以下几部分构成&#xff1a; 获取执行环境读取数据源定义对DataStream的转换操作输出触发程序执行 获取执行环境和触发程序执行都属于对执行环境的操作&#xff0c;那么其构成可以用下图表示…...

编程日记 2023/8/30 15:35:17

Vue3.0 新特性以及使用变更总结

Vue3.0 在2020年9月正式发布了&#xff0c;也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发&#xff0c;这篇文章就是在使用后的一个总结&#xff0c; 包含Vue3新特性的使用以及一些用法上的变更。 图片.png 为什么要升级Vue3 使用Vue2.x的小伙伴都熟悉…...

编程日记 2023/8/30 15:34:16

ToBeWritten之VSOC安全运营

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…...

编程日记 2023/8/30 15:33:12

2023爱分析·一站式通信解决方案市场厂商评估报告：牛信云

[图片] 01 中国企业出海发展背景及阶段 出海背景&#xff1a;出海&#xff0c;对中国企业而言&#xff0c;并不陌生。从最初的贸易型出海&#xff0c;到制造业崛起&#xff0c;再到互联网、移动互联网产业腾飞&#xff0c;中国企业在出海道路上走的越发稳健。行业也从最初的家电…...

编程日记 2023/8/30 15:32:10

微信小程序消防知识每天学平台设计与实现

摘 要 消防是当下一个人都需要在日常生活中所高度重视的事项。消防安全关系到居民的日常生活的安全&#xff0c;通过学习消防知识能够提升人们在日常生活中对于灾难的防范。通过对当下的大学生进行调查研究后发现&#xff0c;现在的年轻人在消防意识上比较的单薄&#xff0c;对…...

编程日记 2023/8/30 15:31:09

Oracle跨库访问DBLINK

1. DBLINK的介绍 Oracle在进行跨库访问时&#xff0c;可以创建DBLINK实现&#xff0c;比如要将UAT的表数据灌入开发环境&#xff0c;则可以使用UAT库为数据源&#xff0c;通过DBLINK实现将查出的数据灌入开发库。 简而言之就是在当前数据库中访问另一个数据库中的表中的数据 2…...

编程日记 2023/8/30 15:30:08

【vue3.0 组合式API与选项式API是什么，有什么区别】

vue3.0 组合式API与选项式API是什么 Vue3.0中引入了组合式API&#xff08;Composition API&#xff09;&#xff0c;同时保留了选项式API&#xff08;Options API&#xff09;。两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际…...

编程日记 2023/8/30 15:29:06

React配置代理的5种方法

React配置代理的五种方法的介绍 使用create-react-app的代理配置&#xff1a; 使用场景&#xff1a;适用于使用create-react-app创建的React项目&#xff0c;特别是小型项目或快速原型开发。优点&#xff1a;配置简单&#xff0c;无需额外安装依赖&#xff0c;适合快速开发和简…...

编程日记 2023/8/30 15:28:04

皮卡丘靶场搭建遇到的问题大全

该博客记录我在安装皮卡丘靶场中遇到的一些问题。 1、 phpstudy_pro启动Mysql失败 自己电脑开启了mysql服务&#xff0c;使用winr&#xff0c;services.msc&#xff0c;找到自己的mysql服务&#xff0c;关闭。再次尝试使用phpstudy_pro启动mysql&#xff0c;成功解决。 2、皮…...

编程日记 2023/8/30 15:27:02

【C++】C++11的新特性（上）

引入 C11作为C标准的一个重要版本&#xff0c;引入了许多令人振奋的新特性&#xff0c;极大地丰富了这门编程语言的功能和表达能力。本章将为您介绍C11的一些主要变化和改进&#xff0c;为接下来的章节铺垫。 文章目录 引入 一、列表初始化 1、1 {} 初始化 1、2 std::initiali…...

编程日记 2023/8/30 15:26:01

ubuntu学习（四）----文件写入操作编程

1、write函数的详解 ssize_t write(int fd,const void*buf,size_t count); 参数说明&#xff1a; fd:是文件描述符&#xff08;write所对应的是写&#xff0c;即就是1&#xff09; buf:通常是一个字符串&#xff0c;需要写入的字符串 count&#xff1a;是每次写入的字节数…...

编程日记 2023/8/30 15:25:00

如何解决MySQL中的套接字错误

MySQL通过使用** socket文件**来管理到数据库服务器的连接&#xff0c;socket文件是一种特殊的文件&#xff0c;可以促进不同进程之间的通信。MySQL服务器的套接字文件名为mysqld.sock&#xff0c;在Ubuntu系统中&#xff0c;它通常存储在/var/run/mysqld/目录中。该文件由MySQ…...

编程日记 2023/8/30 15:23:59

socket

Socket是一种用于网络通信的编程接口&#xff0c;它提供了在计算机网络中进行数据传输的方法。通过Socket&#xff0c;可以在不同主机之间建立网络连接&#xff0c;并通过发送和接收数据来进行通信。在C语言中&#xff0c;可以使用Socket函数库&#xff08;如BSD Socket或Winso…...

编程日记 2023/8/30 15:22:58

Python数据分析实战-判断一组序列（列表）的变化趋势（附源码和实现效果）

实现功能 判断一组序列&#xff08;列表&#xff09;的变化趋势 实现代码 from sklearn.linear_model import LinearRegression import numpy as np # 计算相邻两个数之间的差值的均值&#xff0c;并判断变化趋势。 def trend(lst):diff [lst[i1] - lst[i] for i in range(…...

编程日记 2023/8/30 15:21:57

Spring与MyBatis集成 AOP整合PageHelper插件

目录 1.什么是集成&#xff1f; 2.Spring与MyBatis集成 3.Spring与MyBatis集成的基本配置 4.AOP整合PageHelper插件 1.什么是集成&#xff1f; 集成是指将不同的组件、框架或系统整合到一起&#xff0c;使它们可以协同工作、相互调用、共享资源等。通过集成&#xff0c;可以…...

编程日记 2023/8/30 15:20:56

[Android 四大组件] --- BroadcastReceiver

1 BroadcastReceiver是什么 BroadcastReceiver&#xff08;广播接收器&#xff09;即广播&#xff0c;是一个全局的监听器。 Android 广播分为两个角色&#xff1a;广播发送者、广播接受者。 2 广播类型 广播按照类型分为两种&#xff0c;一种是全局广播&#xff0c;另一种…...

编程日记 2023/8/30 15:19:55

别再手动打包了！用Jenkins Pipeline + Docker + Gitee自动化部署Spring Boot项目（附完整Jenkinsfile）

Jenkins Pipeline实战&#xff1a;从代码提交到容器化部署的全自动化实践 对于Java开发者而言&#xff0c;每次代码变更后的打包、测试、构建镜像和部署流程往往需要耗费大量重复时间。我曾在一个中型项目中统计过&#xff0c;团队每月平均执行这类手动操作超过200次&#xff0…...

编程新知 2026/5/22 5:53:13

Taotoken Token Plan套餐如何帮助个人开发者控制预算

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken Token Plan套餐如何帮助个人开发者控制预算 应用场景类&#xff0c;聚焦个人开发者或学生用户&#xff0c;其AI调用需求波…...

编程新知 2026/5/22 5:23:46

Legba性能优化技巧：10个实用方法提升暴力破解效率 [特殊字符]

Legba性能优化技巧&#xff1a;10个实用方法提升暴力破解效率 &#x1f680; 【免费下载链接】legba The fastest and more comprehensive multiprotocol credentials bruteforcer / password sprayer and enumerator. &#x1f977; 项目地址: https://gitcode.com/gh_mirro…...

编程新知 2026/5/22 4:23:22

【Linux驱动开发】第11天：设备树（Device Tree）超详细全解：从诞生背景到工作原理

一、设备树的诞生背景&#xff1a;传统驱动的致命痛点 在设备树出现之前&#xff08;Linux 3.0之前&#xff09;&#xff0c;Linux内核采用硬编码的方式描述所有硬件信息。这意味着&#xff1a; 每一个开发板的寄存器地址、中断号、GPIO号&#xff0c;都直接写死在驱动代码里换…...

编程新知 2026/5/22 3:49:30

分布式团队的代码协作规范：从分支策略到提交信息格式

在分布式团队模式下&#xff0c;代码协作的地域分散、时区差异和沟通成本&#xff0c;给版本控制和质量保障带来了严峻挑战。作为软件测试从业者&#xff0c;我们不仅是代码质量的“守门员”&#xff0c;更需要深入理解并推动执行规范的代码协作流程&#xff0c;从分支管理到提…...

编程新知 2026/5/22 3:43:14

离子原生QAOA算法：量子优化新突破

1. 离子原生QAOA算法概述量子近似优化算法&#xff08;Quantum Approximate Optimization Algorithm, QAOA&#xff09;是近年来量子计算领域最具前景的算法之一&#xff0c;特别适用于解决组合优化问题。该算法通过交替应用问题哈密顿量和混合哈密顿量&#xff0c;构建参数化量…...

编程新知 2026/5/22 3:28:31

小学期第一周

理论部分&#xff1a;学会了低通滤波器原理&#xff1a;只允许低于截止频率的信号通过&#xff0c;高于截止频率的信号被大幅衰减方波变成正弦波的原理&#xff1a;方波是基波无数奇次谐波的叠加&#xff0c;低通滤波器只留基波、滤掉高频谐波&#xff0c;输出就接近正弦波二阶…...

编程新知 2026/5/22 1:38:14

从零开始学AI Agent：软件工程视角下的企业数字化转型实践指南（收藏版）

本文从软件工程视角出发&#xff0c;探讨了AI Agent在企业数字化转型中的应用与构建。首先强调需求分析的重要性&#xff0c;指出应从业务问题出发判断Agent是否适用。接着&#xff0c;介绍了Agent的系统设计&#xff0c;包括任务编排、上下文管理、记忆存储和工具扩展四个核心…...

编程新知 2026/5/22 1:20:00

在线网盘系统：基于 Spring Boot 的文件存储、分类管理与分享预览实践

在线网盘系统&#xff1a;基于 Spring Boot 的文件存储、分类管理与分享预览实践 项目概述 在线网盘系统的核心目标&#xff0c;是把“文件存储”升级为“文件管理 文件预览 文件分享”的一体化平台。相比只支持上传下载的简易文件系统&#xff0c;这个项目进一步补齐了分类管…...

编程新知 2026/5/22 1:13:13

技术人的人际关系：建立良好的职业网络

技术人的人际关系&#xff1a;建立良好的职业网络 引言 作为一名技术人&#xff0c;人际关系同样重要。良好的人际关系可以帮助我们获得更多机会&#xff0c;提升职业发展。 今天就来分享一下如何建立良好的职业网络。 为什么人际关系重要 职业发展 良好的人际关系有助于职业发…...

编程新知 2026/5/22 0:28:27