vue2数据响应式原理(1) view-model概念,侵入式和非侵入式对比

news2024/9/29 17:22:33

都是练拳不练功 到头一场空 在更新技术视野的前提下 还是要去多学原理 掌握更深的技术范畴

我会先出文后续持续更新 讲解vue2响应式原理 至于vue3 后续有机会 也会弄
这些文章不会直降理论 到一定阶段 也会带大家手写代码去实现一下效果
在这里插入图片描述
首先是 view-model 大家在实际开发中应该也是老朋友了

在这里插入图片描述
按肉眼的理解 无法就是 先编写模板 模板去绑定数据 数据更改后 模板内容也会随之变化

model 表示数据模型
view 则表示视图
view-model就相当于链接他们的一个桥梁

讲到这里 就必须讲一个点 就是侵入式和非侵入式
上面 vue2的数据变化呢 就叫做非侵入式 就直接 this.变量 然后赋值 就好像真的就只需要修改一下this中的值就好了

而反观小程序和react 你想实现一个数据的响应式更改 都需要通过this去调用一个api方法来做修改 这种就叫侵入式
在这里插入图片描述
那么 相对来说 侵入式的这种就比较好理解一点原理 因为 直接在这个api方法中就能捕获到 有响应式变量修改了

而非侵入式 看着就有点小神奇了
可能很多小伙伴也知道 是因为 Object.defineProperty()
它可以做 数据劫持/数据代理
利用JavaScript引擎赋予的功能,检测对象属性变化 不需要任何的包和依赖 直接可以使用

Object.defineProperty() IE8开始网上的版本都可以兼容

当然 仅有这个还是不够的 还需要一套精密的设计系统

好啦 后续我会跟我慢慢讲解

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

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

相关文章

SpringBoot集成Mybatis-Plus实现多租户动态数据源

1. 概述 最近接手一个多租户系统,多租户主要的就是租户之间的数据是相互隔离的,每个租户拥有自己独立的数据,相互之间不干扰。目前实现多租户主要有三种方案: 独立数据库 每个租户拥有自己单独的数据库,从物理上隔离了…

Java语言数据类型与c语言数据类型的不同

目录 一、c语言数据类型 1.基本类型: 2.枚举类型: 3.空类型: 4.派生类型: 二、C语言编程需要注意的64位和32机器的区别 三、 不同之处 一、c语言数据类型 首先,先来整体介绍一下C语言的数据类型分类。 1.基…

空间金字塔池化(Spatial Pyramid Pooling)

1. 前言 当前的深度神经网络一般都需要固定的输入图像尺寸(如224*224)。这种需求很明显是人为的,潜在性的弊端会降低识别精度(为了使图像尺寸相同,一定会涉及到图像的比例/非比例放缩,这就引入了尺度误差和…

机器学习中的三个重要环节:训练、验证、测试

本文重点 模型训练、验证和测试是机器学习中的三个重要环节。这三个环节之间存在着紧密的关系,它们相互作用,共同构建出一个完整的机器学习模型。在本文中,我们将详细介绍模型训练、验证和测试之间的关系。 模型训练、验证和测试之间的关系 模型训练是机器学习中最基本的…

原生Java使用Mybatis操作数据库接口注解形式,与SpringBoot类似且无需管理SqlSession连接的工具类

Hi I’m Shendi https://sdpro.top/blog/html/article/1044.html 需求描述 用 SpringBoot 整合 Mybatis 使用久了,再编写没有Spring但需要操作数据库的程序时就会想着使用接口注解的形式,这样效率比较高和简单 Spring 中只需要编写好接口映射&#xff…

字节跳动正式开源分布式训练调度框架 Primus

动手点关注 干货不迷路 项目地址:https://github.com/bytedance/primus 随着机器学习的发展,模型及训练模型所需的数据量越来越大,也都趋向于通过分布式训练实现。而算法工程师通常需要对这些分布式框架涉及到的底层文件存储和调度系统有较深…

剑指 Offer 52. 两个链表的第一个公共节点 / LeetCode 160. 相交链表(双指针 / 哈希集合)

题目: 链接:剑指 Offer 52. 两个链表的第一个公共节点;LeetCode 160. 相交链表 难度:简单 输入两个链表,找出它们的第一个公共节点。 如下面的两个链表: 在节点 c1 开始相交。 示例 1: 输入…

Spring MVC Bean加载控制

回顾一下我们一般写的项目包括那些包吧: config目录存入的是配置类,写过的配置类有: ServletContainersInitConfigSpringConfigSpringMvcConfigJdbcConfigMybatisConfig controller目录存放的是SpringMVC的controller类service目录存放的是service接口和实现类dao目…

Doo Prime 德璞资本:股指期货交易如何管理好个人情绪

在股指期货交易中,我们可以感觉到心态随着交易的成败而变化。有时心态对交易影响不大,但有时影响很大,一个好的心态,能够应对各种变化,各种损益和市场判断的正确和错误,不会对心态产生很大的影响&#xff0…

ArcGIS中的土地利用变化分析详解

本篇主要是针对矢量数据的分析。 一、不同时期的土地利用矢量数据,如何分析其图形及属性变化? 土地利用图(左图为1993年,右图为2003年) 思路如下: 可以先对2个图层进行Union操作,然后在结果中…

【三十天精通Vue 3】第十四天 Vue 3 的单元测试详解

✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3 文章目录 引言一、为什么要进行单元测试1.1 单元测试的概念1.2 单元测试的优…

Javase学习文档------面象对象再探

再续前缘面向对象 书接上回构造器 在Java中,可以通过在空参构造方法中使用 this() 关键字来调用类中其它的构造方法。 使用 this() 关键字来调用其它构造方法时,需要注意以下几点:1.this() 必须是构造方法的第一条语句; 2.一个构…

经典文献阅读之--NORLAB-ICP(重力约束ICP)

0. 简介 最近几年IPC相关的文章也出了不少,最近作者有看到了一篇比较有意思的ICP论文—《Gravity-constrained point cloud registration》,这篇论文将传统的ICP考虑了重力因素,高频率的IMU数据弥补了低频的传感器数据。除此之外&#xff0c…

4K分辨率搭配光学变焦功能,极米H6成旗舰家用投影首选

近几年,我国投影机市场产品竞争日趋激烈,以极米为代表的国产品牌迅速崛起并逐步超越国际品牌成为中国投影机市场的领跑者。虽然目前国产投影仪品牌比较多,但其中极米科技旗下的产品最受消费者青睐。IDC数据显示,2022年上半年&…

easyexcel导出中自定义合并单元格,通过重写AbstractRowWriteHandler

针对 阿里的easyexcel 自定义处理 任意单元格合并 官方给出的合并单元格 只给出固定规律的单元格合并,当然官方也指出可以自定义合并单元格的策略,我们跟进LoopMergeStrategy 这个合并策略的实例类,发现里面继承了AbstractRowWriteHandler,官方示例代码如下 /*** 合并单元格…

揭秘!Chrome 调试的11+隐藏技巧,让你在开发中如虎添翼!

前言 chrome 浏览器作为前端童鞋的老婆,相信你一定不陌生。调页面、写BUG、画样式、看php片少了它整个世界都不香了。 不信?一起来看看我们的老婆有多厉害… 1、一键重新发起请求 在与后端接口联调或排查线上 BUG 时,你是不是也经常听到他…

Python中的主函数

在Python代码中,我们常常看到主函数是以if __name__ __main__开头的,比如 它的原理是什么呢? 首先要知道,__name__是内置变量,用于表示当前模块的名字。在一个模块中运行以下语句,你会发现输出的是__main…

CSS:横向导航栏

横向导航栏&#xff08;盗版导航栏&#xff0c;B站仿写。&#xff09; 原视频链接 <html><head><title>demo</title><style>*{margin: 0;padding: 0;list-style: none;text-decoration: none;}body{display: flex;justify-content: center;a…

模型蒸馏与压缩简单介绍

目录 一、概述 二、DistilBERT模型介绍 2.1 基本结构 2.2 知识蒸馏方法 一、概述 预训练语言模型虽然在众多自然语言任务中取得了很好的效果&#xff0c;但通常这类模型的参数量较大&#xff0c;很难满足实际应用中的时间和空间需求。 下图给出了常见预训练语言模型参数量的…

JDK11 下载与安装、环境配置(全网最详情,值得收藏)

目录 一、下载JDK11 二、安装JDK11 三、配置环境变量 四、验证环境配置是否成功 五、答疑&#xff0c;为什么不配置 CLASSPATH 什么是JDK JDK是 Java 语言的软件开发工具包&#xff0c;主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心&#xff0…