Vue中双向数据绑定是如何实现的

Vue.js 的双向数据绑定是通过其响应式系统实现的。当 Vue 实例创建时,它会遍历 data 对象中的所有属性,并使用 Object.defineProperty 将它们转化为 getter/setter,使得 Vue 能够追踪每个属性的变化,并在变化时通知相关的依赖进行更新。

以下是 Vue.js 双向数据绑定的基本实现原理的简化版代码示例:

 
function defineReactive(obj, key, val) {
// 创建一个唯一的 Dep 对象,用于存储该属性的所有依赖
const dep = new Dep();// 获取属性的原始值
let value = val;// 定义 getter
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
// 如果存在依赖,则添加该依赖到当前属性的 Dep 对象中
if (Dep.target) {
dep.addSub(Dep.target);
}
return value;
},
set: function reactiveSetter(newVal) {
// 当属性值发生变化时,通知所有依赖进行更新
if (newVal === value) return;
value = newVal;
dep.notify();
}
});
}class Dep {
constructor() {
this.subs = [];
}addSub(sub) {
this.subs.push(sub);
}notify() {
this.subs.forEach(sub => sub.update());
}
}// 用来存储当前的 Watcher 对象,在 getter 中使用
Dep.target = null;class Watcher {
constructor(vm, expOrFn, cb) {
this.cb = cb;
this.vm = vm;
this.expOrFn = expOrFn;
this.value = this.get();
}get() {
// 将当前的 Watcher 对象赋值给 Dep.target,以便在 getter 中添加依赖
Dep.target = this;
const value = this.vm[this.expOrFn];
// 执行完毕后,将 Dep.target 重置为 null
Dep.target = null;
return value;
}update() {
this.run();
}run() {
const value = this.get();
const oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
}
}function observe(value, vm) {
if (!value || typeof value !== 'object') {
return;
}
let obj = Array.isArray(value) ? new Object(value) : value;
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
});
}function Vue(options) {
this.$data = options.data;
observe(this.$data, this);
new Watcher(this, 'message', function(value, oldValue) {
console.log(`message changed from ${oldValue} to ${value}`);
});
}let vm = new Vue({
data: {
message: 'Hello, Vue!'
}
});// 测试双向数据绑定
vm.message = 'Hello, World!'; // 控制台会打印出 "message changed from Hello, Vue! to Hello, World!"

这个示例中,我们定义了一个 defineReactive 函数来将对象的属性转化为 getter/setter,Dep 类用于存储属性的依赖(即 Watcher 对象),Watcher 类用于观察数据的变化并在变化时执行回调函数。observe 函数用于遍历对象的所有属性并调用 defineReactive 进行转化。在 Vue 实例中,我们创建了一个 Watcher 对象来观察 message 属性的变化,并在其变化时打印出一条消息。最后,我们修改 vm.message 的值来测试双向数据绑定是否生效。

需要注意的是,这个示例仅仅是为了说明 Vue.js 双向数据绑定的基本原理,并没有包含 Vue.js 完整框架中的所有特性和优化。在实际的 Vue.js 框架中,还包括了模板编译、指令解析、虚拟 DOM、组件系统等更多复杂的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/28613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python学习:语法(2)

目录 对象的布尔值 分支结构 双分支结构 多分支结构 嵌套if的使用 条件表达式 Pass语句 range()函数的使用 流程控制语句 对象的布尔值 Python一切皆对象,所有对象都有一个布尔值,通过内置函数bool()获取对象的布尔值 这些…

路由器虚拟服务器有什么作用

现如今在IPv4时代,由于公网IP地址的匮乏,约有70%的电脑都处于内网中,上网需要通过路由器。如果反过来想要访问身处内网的电脑,我们就需要在路由器里开放相应的端口才能实现。而这开放端口的功能,在路由器里就叫做虚拟服…

NASA数据:南极海洋生物资源

Antarctic Marine Living Resources (AMLR) program 南极海洋生物资源许可证 南极海洋生物资源保护委员会公约区受到管制。任何打算从该区域捕获海洋生物的人都必须获得许可证。 简介 美国是南极海洋生物资源保护委员会(Commission for the Conservation of Anta…

JVM面试重点-2

16. 吞吐量优先和响应时间优先的回收器是哪些? 吞吐量优先:Parallel Scavenge Parallel Old(多线程并行)->简称: PSPO -> JDK1.8默认响应时间优先:ParNew CMS(并发回收垃圾&#xff09…

git 分支管理规范

分支命名 master 分支 master 为主分支,也是用于部署生产环境的分支,需要确保master分支稳定性。master 分支一般由 release 以及 hotfix 分支合并,任何时间都不能直接修改代码。 develop 分支 develop 为开发环境分支,始终保持…

VMware 桥接网络突然无法上网

VMware 桥接网络突然无法上网 0. 问题1. 解决方法 0. 问题 昨天,VMware 桥接网络正常使用,今天突然无法上网。 1. 解决方法 打开VMware的虚拟网络编辑器,将桥接模式的网络从“自动”改成你要使用的网卡,问题解决。 完成&#…

通过命令行启动MySQL

通过命令行启动MySQL 右击,选择管理员运行 停止MySQL net stop你的服务名称 net stop MySQL启动MySQL net start你的服务名称 net start MySQL

ElasticSearch地理空间数据了解

ElasticSearch地理空间数据了解 使用场景 Elasticsearch 的地理空间数据处理功能在现代社会中有着广泛的应用,以下是一些常见的使用场景和方向: 1. 位置搜索和导航 本地服务发现:应用程序可以使用 Elasticsearch 查找用户附近的餐馆、商店…

【java分布式计算】分布式计算程序设计基础

期末复习 自留 重点只抓考点 目录 基本技术 SOCKETS网络套接字 多线程 数据序列化 Java I/O流 集合容器 范型 内部类、匿名类、Lambda(代码) 项目构建管理工具 高级技术 注解(代码) 反射(代码)…

C语言笔记第15篇:文件操作

1、为什么使用文件? 如果没有文件,我们写的程序的数据是存储在电脑的内存中,如果程序退出,内存回收,数据就丢失了,等再次运行程序,是看不到上次程序的数据的,如果要将数据进行持久化…

【PL理论】(29) OOP:面向对象编程 | 案例研究:C++ 中的类 | 继承 | 继承和指针 | Object-oriented Programming

💭 写在前面:本章我们将进入 Object-oriented Programming,面向对象编程的讲解,探讨 C 中的类,继承等。 目录 0x00 面向对象编程 0x01 C语言中的结构体 0x02 案例研究:C 中的类 0x03 术语 0x04 继承&…

PHP调用阿里云OSS的SDK封装成服务的完整指南与问题解决

在现代Web开发中,使用云存储来管理和存储大量的静态文件已经成为常态。阿里云OSS(对象存储服务)是其中一个非常受欢迎的选择。在这篇文章中,我们将详细讲解如何在PHP项目中集成并使用阿里云OSS SDK。 #### 一、前期准备 在开始之…

vue3轮播图怎么做

先看效果 实现代码 <n-carouseleffect"card"dot-type"line"draggable:autoplay"!isHovered":current-index"currentIndex"prev-slide-style"transform: translateX(-150%) translateZ(-450px);opacity:1"next-slide-st…

【MySQL】(基础篇十三) —— 联结

联结 本文介绍什么是联结&#xff0c;为什么要使用联结&#xff0c;如何编写使用联结的SELECT语句。介绍如何对被联结的表使用表别名和聚集函数。 SQL最强大的功能之一就是能在数据检索查询的执行中联结&#xff08;join&#xff09;表。联结是利用SQL的SELECT能执行的最重要…

springboot+vue+mybatis教师工作审核系统+PPT+论文+讲解+售后

随着社会不断进步与发展&#xff0c;生活节奏不断加快&#xff0c;信息已经成为我们生活中不可缺少的一部分&#xff0c;很多学校需要掌握大量的信息来了解特定学生的需求&#xff0c;传统的做法是组织大量的人力物力对学生散发调查表&#xff0c;然后对收集的信息进行统计并得…

基于Matlab的BP神经网络的车牌识别系统(含GUI界面)【W7】

简介&#xff1a; 本系统结合了图像处理技术和机器学习方法&#xff08;BP神经网络&#xff09;&#xff0c;能够有效地实现车牌的自动识别。通过预处理、精确定位、字符分割和神经网络识别&#xff0c;系统能够准确地识别各种车牌图像&#xff0c;并在智能交通管理、安防监控等…

LeetCode 338.比特位计数

各位朋友们&#xff0c;大家好啊&#xff0c;今天此题我用的方法比较好理解&#xff0c;但时间复杂度比较高如果大家觉得可以的话&#xff0c;不妨给个免费的赞吧&#xff0c;谢谢了^ _ ^ 1.题目要求如图所示: 2.做题步骤: 1.先计算总共多少个数: int count 0;int number 0;…

25 avl树

目录 底层结构avl树的概念节点定义插入旋转验证删除全性能 1. 底层结构 前面对map/multimap/set/multiset进行了简单的介绍&#xff0c;在其文档介绍中发现&#xff0c;这几个容器有几个共同点是&#xff1a;其底层都是按照二叉搜索树来实现的&#xff0c;但是二叉搜索树有自…

Android.mk的用法

前言 Android.mk 文件是 Android 编译系统中用于描述项目源文件、库和模块的 Makefile。它采用 GNU Make 的语法,但也包含了一些特定于 Android 编译系统的规则和变量。以下是对其语法和使用方法的详细解释及示例。 一:模块种类 一个Android.mk file用来向编译系统描述你的源…

用Copilot画漫画,Luma AI生成视频:解锁创意新玩法

近年来&#xff0c;随着人工智能技术的不断发展&#xff0c;各种创意工具也层出不穷。今天&#xff0c;我们就来介绍一种全新的创作方式&#xff1a;使用Copilot画漫画&#xff0c;再将漫画放入Luma AI生成视频。 Copilot&#xff1a;你的AI绘画助手 Copilot是一款基于人工智…