响应式原理

2023-11-11

vue响应式原理

vue2

vue2中使用了ES5里面的Object.defineProperty方法,给对应data中的数据的每个值添加了setget方法,当值被修改时,就会触发对应的set方法,set方法里会通知独影的watcher,watcher接收后将触发render函数,重新渲染数据。

1、Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下

View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实例的vm对象
Model层:在Vue中是data、computed、methods等中的数据 在 Model
在 Model 层的数据变化时,View层会在ViewModel的作用下,实现自动更新

2、Vue的响应式原理 Vue响应式底层实现方法:

Object.defineProperty() 方法,该方法中存在一个getter和setter的可选项,可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据 在使用getter方法时,总会通知wather实例对view层渲染页面
同样的,在使用setter方法时,总会在变更值的同时,通知wather实例对view层进行更新

3、响应式原理与兼容

由于 Object.defineProperty()
方法只部分支持IE9,所以Vue兼容IE版本最低为IE9,在IE9中,Vue的核心框架、vue-router、vuex是确保可以正常使用的

4、响应式原理示意图
在这里插入图片描述
1、在实例前声明

var vm = new Vue({
	data: {
	name: "failte"
	}
})

在实例前声明的属性会在实例时添加 getter()、setter() 方法,因此此时的name是响应式的,每当name变化时,会自动更新视图

2、在实例后添加

vm.name = "failte"

由于data中没有该属性,因此实例后,此时的name是非响应式的,name变化时,不会更新视图 若需要转换为响应式数据,需要使用Vue.set() 方法手动添加为响应式属性

Vue.set(vm.data, "name", "ajaccio")
//Vue.$set是该方法的别名

vue响应式原理示意图:

关系图

vue3

vue3里面是改用ES6里面的特性proxy来实现对应的给数据添加set和get方法的操作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

响应式原理 的相关文章

  • centos7如何配置静态ip?

    1 切换到root用户 su root 2 获取可用IP地址 dhclient 这一步成功后 用ifconfig命令查看已分配的可用ip 并写到下面网卡配置中 本例中是 192 168 154 132 3 编辑网卡配置 修改标记部分 vim
  • 【前后端分离博客】学习笔记05 --- canal

    一 概述 使用canal rabbitMQ 实现 MySQL 和 Elasticsearch 的数据同步 图解 流程如下 给mysql开启binlog功能 mysql完成增 删 改操作都会记录在binlog中 canal监听binlog变化

随机推荐

  • caffe源码导读(六)layer.hpp头文件解析

    文章目录 一 前篇 二 正文layer hpp头文件解析 三 layer cpp相关的一些理解 四 关于序列化以及第57行为什么要先reset的小例子 本篇为基于 lt 深度学习21天实战caffe gt 所做的学习笔记 如果错误 欢迎指导
  • Ruby on rails 或 Ruby Goliath 利用redis + sidekiq 实现异步处理机制

    使用背景 在平常工作中 出于性能考虑 很多工作或者任务可以放到后台悄悄咪咪地执行 而在接口层或者界面交互的地方 给用户快速返回 利用Redis Sidekiq的组合方式 能够在Ruby on Rails web框架或者Ruby Goliat
  • 帧差法、光流法、背景减除法

    运动目标检测是指在序列图像中检测出变化区域并将运动目标从背景图像中提取出来 通常情况下 目标分类 跟踪和行为理解等后处理过程仅仅考虑图像中对应于运动目标的像素区域 因此运动目标的正确检测与分割对于后期处理非常重要然而 由于场景的动态变化 如
  • Java限制泛型可用类型与泛型通配的方式

    1 限制泛型可用类型概念 1 在定义泛型类别时 默认在实例化泛型类型的时候可以使用任何类型 但是如果想要限制泛型类型时 只能用某个特定的类型或者是其子类型才能实例化该类型时 可以定义类型时 使用extends关键字指定这个类型必须是继承某个
  • Apollo配置参数读取后再做替换

    1 先描述业务场景 在Apollo上做配置 然后读取配置 然后做替换 2 一路坎坷 2 1 在Apollo上配置 但是vlue包含有占位符 获取配置报错 Injection of autowired dependencies failed
  • docker mysql镜像忽略表名大小写

    1 安装mysql镜像 docker pull mysql 2 运行mysql docker run net host restart always privileged true v usr docker dat mysql data v
  • Linux基础学习笔记(五)——文件的ACL权限

    Linux基础学习笔记 五 文件的ACL权限 文章目录 Linux基础学习笔记 五 文件的ACL权限 前言 什么是ACL控制 setfacl getfacl mask 最大有效ACL权限 默认的ACL权限和递归的ACL权限 小结 前言 这一
  • Action行动算子 及相应的举例

    7 Action行动算子 转换算子 起始就是记录了数据的一个操作流程 RDD1 gt RDD2 gt RDD3 gt RDD4 流式运算现象 RDD1 到 RDD4 之间维护血缘关系 操作行为 RDD的转换算子是lazy加载 不执行行动算子
  • angular : 自定义组件双向绑定 [(ngModel)]

    NG VALUE ACCESSOR 用于为表单控件提供 ControlValueAccessor interface ControlValueAccessor writeValue obj any void registerOnChange
  • Java进阶9--多线程

    Java进阶9 多线程 文章目录 Java进阶9 多线程 概述 一个线程的生命周期 线程的优先级 创建一个线程 通过实现 Runnable 接口来创建线程 通过继承Thread来创建线程 Thread 方法 实例 通过 Callable 和
  • next.js 源码解析 - getStaticProps、getStaticPaths 篇

    好久前写了关于 getStaticProps 和 getStaticPaths 的内容 然而半年过去了源码解析就一直忘记了 不久前有人提醒才想起来 补下坑 本文主要是解读下 getStaticProps getStaticPaths 相关的
  • 基于主成分分析(PCA)的人脸识别算法

    本次实战的所有数据 文献 代码及输出均在以下百度云链接 链接 https pan baidu com s 1tR3VCyHxL7EZx su 3mxNg 提取码 siso 1 要求 实战的数据及要求如下 用到的数据库为XM2VTS中的前20
  • 二进制转换为三进制 ——C++实现

    二进制转换为三进制 题目 输入一个2进制的数 要求输出该2进制数的3进制表示 在3进制的表示中 只有0 1 2三种符号 Input 第1行是测试数据的组数n 后面跟着n行输入 每组测试数据占1行 包括一个以0和1组成的字符串 字符串长度至少
  • 简单的用Python采集招聘数据内容,并做可视化分析!

    哈喽大家好 现在刚毕业 很多小伙伴因为找不到工作或者找了很多也不喜欢 再有懒一点的 太热了根本不想出门到处找 所以今天给大家分享使用Python批量采集招聘数据 进行可视化分析 轻松找到心仪工作 话不多说 我们直接开始 准备工作 软件工具
  • linux 卸载 rtx,在Ubuntu 18.04系统中安装RTX 2080Ti显卡驱动的方法

    在Ubuntu 18 04操作系统中使用GeForce RTX 2080Ti显卡 但是系统内置的驱动与PPA安装都不行 需要安装NVidia官方的驱动才能运行起来 下面是实现的方法 1 先禁用Ubuntu 18 04系统默认显卡驱动 打开系
  • ECM麦克风电路元器件计算

    ECM麦克风电路元器件设计 一 计算Micbias 偏置电阻R R 偏置电压 micbias电压 静态电流 1 偏置电阻计算案例 供电2V ECM麦克风电流500uA 偏置电阻取值 设置合适的偏置电阻 麦克风实现最大输出 需麦克风两端电压是
  • Multisim14基本介绍(上)

    Multisim14是一种专门用于电路仿真和设计的软件之一 是NI公司下属的ElectroNIcs Workbench Group推出的以Windows为基础的仿真工具 是目前最为流行的EDA软件之一 该软件基于PC平台 采用图形操作界面虚
  • ValueError: Input contains NaN, infinity or a value too large for dtype('float64').

    笔者在使用LogisticRegression模型进行预测时 报错 Traceback most recent call last File D 软件 学习 Python MachineLearing taitannike train py
  • Linux Docker容器 镜像的详解与创建

    一 什么是docker 镜像 就是把业务代码 可运行环境进行整体的打包 二 如何创建docker镜像 现在docker官方共有仓库里面有大量的镜像 所以最基础的镜像 我们可以在公有仓库直接拉取 因为这些镜像都是原厂维护 可以得到即使的更新和
  • 响应式原理

    vue响应式原理 vue2 vue2中使用了ES5里面的Object defineProperty方法 给对应data中的数据的每个值添加了set和get方法 当值被修改时 就会触发对应的set方法 set方法里会通知独影的watcher