vue双向绑定原理

article/2025/11/9 16:30:07

**

Vue双向绑定的原理

一、在讲vue双向绑定之前我们需要来了解下MVVM模式

MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。

  • View：视图层（UI 用户界面）
  • ViewModel：业务逻辑层（一切 js 可视为业务逻辑，也就是前端的日常工作）
  • Model：数据层（存储数据及对数据的处理如增删改查）

  • MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel
    这个桥梁进行交互

  • Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model
    的变化也会立即反映到 View 上显示

  • 当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel
    也能感知到变化，使 View 作出相应更新
    MVVM的核心就是ModelView-即双向绑定
    MVVM框架的的核心就是双向绑定, 其原理是通过数据劫持+发布订阅模式相结合的方式来是实现的，简单来说就是数据层发生变化的时候，可同布更新视图层，当视图层发生变化的时候，同步更新数据层

双向绑定的核心： Object.defineProperty()

Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

  • obj：要定义属性的对象
  • prop：要定义或修改的属性的名称或 Symbol
  • descriptor：要定义或修改的属性描述符
  • 返回值：被传递给函数的对象

我们通过Object.defineProperty的get方法用来获取值 set方法用来拦截设置值

  var obj = {};  //定义一个空对象Object.defineProperty(obj, 'val', {//定义要修改对象的属性get: function () {console.log('获取对象的值')},set: function (newVal) { console.log('设置对象的值：最新的值是'+newVal);}});obj.hello = 'hello world'

js通过Object.defineProperty方法简单的实现双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="app"><span id="childSpan"></span>
</body>
<script>var obj = {}var initValue='初始值'Object.defineProperty(obj,'initValue',{get(){console.log('获取obj最新的值');return initValue},set(newVal){initValue = newValconsole.log('设置最新的值');// 获取到最新的值  然后将最新的值赋值给我们的spandocument.getElementById('childSpan').innerHTML = initValueconsole.log(obj.initValue);}})document.addEventListener('keyup', function (e) {obj.initValue = e.target.value; //监听文本框里面的值 获取最新的值 然后赋值给obj })</script>
</html>

实现双向绑定的过程

在这里插入图片描述
任务拆分：

  1. 将vue实例中的数据渲染到页面上
  2. 将页面上的数据变更同步到vue实例中
  3. vue实例中data数据变更 页面上数据同步变更

传统的js来操作dom是非常繁琐的 性能及低的 比如我们要操作 dom 10次 操作第一次的时候 浏览器并不知道后面还有9次操作 所以浏览器会进行10次的重绘重排 但有的时候我们进行下一次的操作的时候 前一次的操作结果已经不准确了 那前一次的操作结果就是无用功了 白白浪费了性能。 DocuemntFragment（碎片化文档）可以把其看成一个容器 把浏览器的10次操作都扔到这个容器里 最终把最后一次的结果输出到浏览器上 这样我们页面只渲染了一次 ，并且DocuemntFragment是在内存中执行的 效率非常高。

DocuemntFragment 拦截数据：

 function nodeToFragment(node){var fragment = document.createDocumentFragment();var child = null;while(child = node.firstChild){fragment.appendChild(child)}return fragment}

实现思路：

  1. 如何将vue data 中的数据对应的绑定到文本上
  2. 如果将input中的数据 更新到vue实例的data中

nodeToFragment方法中 我们会拦截到所有的dom 然后对dom节点的属性进行分析 比如找到v-model中的对应的变量跟vue data中的变量进行匹配，匹配到对应项，然后进行更新数据

vue构造函数

	// 构造函数function Vue(options){this.data = options.datavar id = options.elvar dom = nodeToFragment(document.getElementById(id),this)document.getElementById(id).appendChild(dom)}// 实例var vm = new Vue({el: 'app',data: {text: '赵刚',test:'测试',name:'hbb'}})// dom结构<div id="app">测试双向绑定demo<input type="text" v-model="text" /> {{text}}</div>

拦截dom并找到vue实例中data对应的数据，然后渲染到页面上

        //编译函数function compile(node, vm) {var reg = /\{\{(.*)\}\}/; // 来匹配{{xxx}}中的xxx//如果是元素节点if(node.nodeType === 1) {var attr = node.attributes;//解析元素节点的所有属性for(let i = 0; i < attr.length; i++) {if(attr[i].nodeName == 'v-model') {var name = attr[i].nodeValue //看看是与哪一个数据相关node.addEventListener('input', function(e) { //将与其相关的数据改为最新值vm[name] = e.target.value})node.value = vm.data[name]; //将data中的值赋予给该node}}}//如果是文本节点if(node.nodeType === 3) {if(reg.test(node.nodeValue)) {var name = RegExp.$1; //获取到匹配的字符串name = name.trim();node.nodeValue = vm[name]; //将data中的值赋予给该node}}}

将获取到的data中的数据更新到文档碎片中

	   function nodeToFragment(node, vm) {var fragment = document.createDocumentFragment();var child;while(child = node.firstChild) {compile(child, vm);// 将从data中获取到的数据的dom更新到文档碎片中  这样页面上的dom就有值啦fragment.appendChild(child);}return fragment}

如此我们就完成了第一步 将data中数据渲染到页面上啦

第二步是当页面上的数据发生变化的时候 将最新的数据更新到data中
首先我们需要拦截data对象中的所有属性 这样当页面数据发生改变 我们会在setter函数中监听到数据变化并拿到最新的数据

		function Vue(options) {this.data = options.data;observe(this.data, this) //观察整个data对象var id = options.el;var dom = nodeToFragment(document.getElementById(id), this)//处理完所有节点后，重新把内容添加回去document.getElementById(id).appendChild(dom)}// 拦截data中的所有属性function observe(obj, vm) {for(let key of Object.keys(obj)) {defineReactive(vm, key, obj[key]);}}function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {get: function() {// 获取对象的值return val},set: function(newVal) {val = newVal;// 当对象属性值变更 拦截数据console.log('新值' + val);}})}

第三步 就是当我们已经拿到最新的变更后的数据了 那么怎么通知dom 让其对应的更新成最新的数据呢 我们都知道一个页面就是一个组件 一个vue实例对象 那么我们就需要一个中间桥梁 当数据发生变化 这个中间桥梁拿到最新数据 然后告诉页面 数据更新了 你需要重新渲染了

发布订阅模式:
发布订阅者模式就是一种一对多的依赖关系。多个订阅者（一般是注册的函数）同时监听同一个数据对象，当这个数据对象发生变化的时候会执行一个发布事件，通过这个发布事件会通知到所有的订阅者，使它们能够自己改变对数据对象依赖的部分状态。
一个完整的订阅发布模式，由发布者、订阅者、消息管理器三部分组成
在这里插入图片描述
在双向数据绑定中 每当有数据发生变化就要发布一个通知 让视图层更新 那么在set函数中就要发布订阅函数 而每一个对象属性都是订阅者

        //dep构造函数function Dep() {this.subs = [] // 观察主题添加订阅者}Dep.prototype = {// 添加订阅者addSub(sub) {this.subs.push(sub)},// 发布通知notify() {this.subs.forEach(function(sub) {sub.update();})}}function defineReactive(obj, key, val) {var dep = new Dep(); //观察者实例Object.defineProperty(obj, key, {get: function() {if(Dep.target) { //每一个观察着都是唯一的dep.addSub(Dep.target)}return val},set: function(newVal) {if(newVal === val) {return}val = newVal;console.log('新值' + val);//一旦更新立马通知dep.notify();}})}

以上我们已经完成了当数据发生变化的时候，通知所有的订阅者 数据更新了 快更新dom吧 那如何将发布者和订阅者关联起来呢？通过将每一个Watcher实例赋值给Dep.target 的全局变量，这样Watcher和Dep就有关系了，当操作完成了就需要将Dep.target 置为空 这样保证了 Watcher实例的唯一性

        // Watcher监听者function Watcher(vm, node, name) {Dep.target = this;this.vm = vm;this.node = node;this.name = name;this.update();Dep.target = null;}Watcher.prototype = {update() {this.get();this.node.nodeValue = this.value //更改节点内容的关键},get() {this.value = this.vm[this.name] //触发相应的get}}

如此 双向绑定原理已经介绍完成，虽然刚开始接触，还有那么一丢丢小困难，但是困难是暂时的，只要我们踏踏实实的一步一步的往下去，突然有一天你会豁然开朗的发现，原来也不过如此嘛

最终，附上完整版的demo实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app">测试双向绑定demo<input type="text" v-model="text" /> {{text}}</div></body><script type="text/javascript">//编译函数function compile(node, vm) {var reg = /\{\{(.*)\}\}/; // 来匹配{{xxx}}中的xxx//如果是元素节点if(node.nodeType === 1) {var attr = node.attributes;//解析元素节点的所有属性for(let i = 0; i < attr.length; i++) {if(attr[i].nodeName == 'v-model') {var name = attr[i].nodeValue //看看是与哪一个数据相关node.addEventListener('input', function(e) { //将与其相关的数据改为最新值vm[name] = e.target.value})node.value = vm.data[name]; //将data中的值赋予给该nodenode.removeAttribute('v-model')}}}//如果是文本节点if(node.nodeType === 3) {if(reg.test(node.nodeValue)) {var name = RegExp.$1; //获取到匹配的字符串name = name.trim();node.nodeValue = vm[name]; //将data中的值赋予给该nodenew Watcher(vm, node, name) //绑定一个订阅者}}}// 在向碎片化文档中添加节点时，每个节点都处理一下function nodeToFragment(node, vm) {var fragment = document.createDocumentFragment();var child;while(child = node.firstChild) {compile(child, vm);fragment.appendChild(child);}return fragment}//  Vue构造函数     //   观察data中的所有属性值，注意增添了observefunction Vue(options) {this.data = options.data;observe(this.data, this)var id = options.el;var dom = nodeToFragment(document.getElementById(id), this)//处理完所有节点后，重新把内容添加回去document.getElementById(id).appendChild(dom)}//实现一个响应式监听属性的函数。一旦有赋新值就发生变化 function defineReactive(obj, key, val) {var dep = new Dep(); //观察者实例Object.defineProperty(obj, key, {get: function() {if(Dep.target) { //每一个观察着都是唯一的dep.addSub(Dep.target)}return val},set: function(newVal) {if(newVal === val) {return}val = newVal;console.log('新值' + val);//一旦更新立马通知dep.notify();}})}//实现一个观察者，对于一个实例 每一个属性值都进行观察。function observe(obj, vm) {for(let key of Object.keys(obj)) {defineReactive(vm, key, obj[key]);}}// Watcher监听者function Watcher(vm, node, name) {Dep.target = this;this.vm = vm;this.node = node;this.name = name;this.update();Dep.target = null;}Watcher.prototype = {update() {this.get();this.node.nodeValue = this.value //更改节点内容的关键},get() {this.value = this.vm[this.name] //触发相应的get}}//dep构造函数function Dep() {this.subs = [] // 观察主题添加订阅者}Dep.prototype = {// 添加订阅者addSub(sub) {this.subs.push(sub)},// 发布通知notify() {this.subs.forEach(function(sub) {sub.update();})}}var vm = new Vue({el: 'app',data: {text: '赵刚'}})</script></html>

http://chatgpt.dhexx.cn/article/dZaOq21C.shtml

相关文章

OpenCV中的图像处理 —— 傅里叶变换+模板匹配

OpenCV中的图像处理 —— 傅里叶变换+模板匹配

OpenCV中的图像处理 —— 傅里叶变换模板匹配 现在也在逐渐深入啦&#xff0c;希望跟大家一起进步越来越强 目录 OpenCV中的图像处理 —— 傅里叶变换模板匹配1. 傅里叶变换1.1 Numpy实现傅里叶变换1.2 OpenCV实现傅里叶变换1.3 DFT的性能优化 2. 模板匹配2.1 单对象的模板匹配…
阅读更多...
opencv 多角度模板匹配

opencv 多角度模板匹配

总结一下实现多角度模板匹配踩的坑 一 、多角度匹配涉及到要使用mask&#xff0c;首先opencv matchTemplateMask自带的源码如下&#xff1a; static void matchTemplateMask( InputArray _img, InputArray _templ, OutputArray _result, int method, InputArray _mask ) {CV_A…
阅读更多...
用OpenCV进行模板匹配

用OpenCV进行模板匹配

1. 引言 今天我们来研究一种传统图像处理领域中对象检测和跟踪不可或缺的方法——模板匹配&#xff0c;其主要目的是为了在图像上找到我们需要的图案&#xff0c;这听起来十分令人兴奋。 所以&#xff0c;事不宜迟&#xff0c;让我们直接开始吧&#xff01; 2. 概念 模板匹…
阅读更多...
OpenCV之模板匹配

OpenCV之模板匹配

模板匹配的概念与原理 模板匹配是在一幅图像中寻找与另一幅模板图像最匹配&#xff08;相似&#xff09;部分的技术&#xff0c;在OpenCV中&#xff0c;模板匹配由函数MatchTemplate()函数实现。需要注意的是&#xff0c;模板匹配不是基于直方图的&#xff0c;而是通过在输入图…
阅读更多...
基于OpenCV的模板匹配

基于OpenCV的模板匹配

模板匹配是一项在一幅图像中寻找与另一幅模板图像最匹配(相似)部分的技术。模板匹配不是基于直方图的, 而是通过在输入图像上滑动图像块(模板)同时比对相似度, 来对模板和输入图像进行匹配的一种方法。 image: 待搜索图像(大图)templ: 搜索模板, 需和原图一样的数据类型且尺寸…
阅读更多...
【OpenCV系列】模板匹配

【OpenCV系列】模板匹配

原理 什么是模板匹配? 模板匹配是一项在一幅图像中寻找与另一幅模板图像最匹配(相似)部分的技术. 它是怎么实现的? 我们需要2幅图像: 我们的目标是检测最匹配的区域: 原图像 (I): 在这幅图像里,我们希望找到一块和模板匹配的区域模板 (T): 将和原图像比照的图像块 为了…
阅读更多...
python opencv 模板匹配

python opencv 模板匹配

模板匹配是在一个大图里搜索和找模板图像位置的方法。OpenCV有个函数cv2.matchTemplate()来做这个。它吧模板图像在输入图像上滑动&#xff0c;对比模板和在模板图像下的输入图像块。它返回了一个灰度图像&#xff0c;每个像素表示那个像素周围和模板匹配的情况。 如果输入图像…
阅读更多...
基于OpenCV的图像匹配----模板匹配（一）

基于OpenCV的图像匹配----模板匹配（一）

我先介绍一下模板匹配的原理 原图像&#xff1a;我们期望找到与模板图像匹配的图像 模板图像&#xff1a;将于模板图像进行比较的图像 一次移动一个像素&#xff08;从左到右&#xff0c;从上到下&#xff09;。在每个位置&#xff0c;计算相似度度量&#xff0c;以便它表示在…
阅读更多...
OpenCV图像处理——模板匹配

OpenCV图像处理——模板匹配

总目录 图像处理总目录←点击这里 十一、模板匹配 11.1、原理 找一个图片上有的模板&#xff0c;和原图像进行模板匹配模板图像在待匹配图像上滑动&#xff0c;记录下每次滑动后的参数值&#xff08;如平方差&#xff0c;相关性&#xff09;。寻找最小值或最大值&#xff0…
阅读更多...
OpenCV模板匹配算法详解

OpenCV模板匹配算法详解

本博客在https://www.cnblogs.com/zhaoweiwei/p/OpenVC_matchTemplate.html基础上进行更加详细的注解。当初有几个地方看的比较费劲&#xff0c;但是里面没有注释&#xff0c;现给加上&#xff0c;主要是那些带黄色及红色部分的注释。 在此向weiwei22844致敬。 模板匹配是在一…
阅读更多...
OpenCV 模板匹配(Template Match)

OpenCV 模板匹配(Template Match)

文章目录 模板匹配介绍模板匹配定义匹配算法平方差归一化的平方差相关性归一化的相关性相关性系数归一化的相关性系数 相关API代码示例 模板匹配介绍 模板匹配定义 模板匹配就是在整个图像区域发现与给定子图像匹配的小块区域。 所以模板匹配首先需要一个模板图像T&#xff…
阅读更多...
OpenCV 模板匹配

OpenCV 模板匹配

模板匹配就是在大图中找小图&#xff0c;也就说在一幅图像中寻找另一幅模板图像的位置。 案例来源于傅老师。 模板匹配的操作方法是将模板图像B在图像A上滑动&#xff0c;遍历所有像素以完成匹配。 工作原理&#xff1a;在带检测图像上&#xff0c;从左到右&#xff0c;从上…
阅读更多...
13 -- OpenCV学习—模板匹配

13 -- OpenCV学习—模板匹配

模板匹配 1.模板匹配 模板匹配&#xff1a;在给定的模板中查找最相似的区域 实现流程&#xff1a; 准备两幅图像 &#xff08;1&#xff09;原图 &#xff08;2&#xff09;模板图滑动模板块和原图像进行比对对于每个像素位置。将计算结果存在矩阵中&#xff0c;输入图像大小…
阅读更多...
opencv模板匹配步骤及Code

opencv模板匹配步骤及Code

opencv模板匹配步骤及Code 首先介绍一下模板匹配的适用场景&#xff1a; 1、图像检索 2、目标跟踪 简单的说&#xff0c;模板匹配最主要的功能就是在一幅图像中去寻找和另一幅模板图像中相似度最高的部分&#xff0c;这就是模板匹配。 比如&#xff0c;在下面这图片中: 我们要…
阅读更多...
OpenCV 学习笔记（模板匹配）

OpenCV 学习笔记（模板匹配）

OpenCV 学习笔记&#xff08;模板匹配&#xff09; 模板匹配是在一幅图像中寻找一个特定目标的方法之一。这种方法的原理非常简单&#xff0c;遍历图像中的每一个可能的位置&#xff0c;比较各处与模板是否“相似”&#xff0c;当相似度足够高时&#xff0c;就认为找到了我们的…
阅读更多...
OpenCV-模板匹配 单个对象匹配、多个对象匹配

OpenCV-模板匹配 单个对象匹配、多个对象匹配

目录 概念步骤单个对象匹配代码实现一代码实现二 多个对象匹配代码实现 概念 模板匹配与剪辑原理很像&#xff0c;模板在原图像上从原点开始浮动&#xff0c;计算模板&#xff08;图像被模板覆盖的地方&#xff09;的差别程度&#xff0c;这个差别程度的计算方法在opencv里有六…
阅读更多...
openCV——模板匹配

openCV——模板匹配

单模板匹配 import cv2 #opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt#Matplotlib是RGB %matplotlib inline def cvshow(name, ndarray):img cv2.imshow(name, ndarray)cv2.waitKey(0)cv2.destroyAllWindows()模板匹配是指在当前图像 A 内寻找…
阅读更多...
Python+Opencv实现模板匹配

Python+Opencv实现模板匹配

目录 一、模板匹配简介二、传统模板匹配算法不足之处三、多尺度模板匹配实现步骤四、多尺度模板匹配实现代码五、多尺度模板匹配效果展示和分析六、思维扩展参考资料注意事项 一、模板匹配简介 所谓的模板匹配&#xff0c;即在给定的图片中查找和模板最相似的区域&#xff0c;该…
阅读更多...
OpenCV数字图像处理实战二：模板匹配（C++）

OpenCV数字图像处理实战二：模板匹配（C++）

OpenCV数字图像处理实战二&#xff1a;模板匹配&#xff08;C&#xff09; 1、模板匹配原理 模板匹配&#xff08;TemplateMatching&#xff09;就是在一幅图像中寻找和模板图像&#xff08;template&#xff09;最相似的区域&#xff0c;模板匹配不是基于直方图的&#xff0…
阅读更多...
opencv 模板匹配形状匹配

opencv 模板匹配形状匹配

文章目录 1. 找圆垫子1.1 得到模板1.2 形状匹配 2. 找瓜子 这是第四次作业要求 所以今天就趁机会讲讲模板匹配&#xff0c;正好之前的项目有一部分重要工作就是和模板匹配紧密相关&#xff0c;对于今天作业来说&#xff0c;之前的项目难度更大&#xff0c;因为涉及到许多要考虑…
阅读更多...
推荐文章

Copyright @ 2022~2023