深入vue响应式原理

  1. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter
    这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。

  2. 每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
    在这里插入图片描述

  3. 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
    Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如:

    var vm = new Vue({data:{a:1}
    })// `vm.a` 是响应式的vm.b = 2
    // `vm.b` 是非响应式的
    
  4. 对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如,对于:

    Vue.set(vm.someObject, 'b', 2)
    
  5. 有时你可能需要为已有对象赋值多个新 property,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新 property 不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

    // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
    
  6. Vue 不能检测以下数组的变动:

    当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如:vm.items.length = newLength
    举个例子:

    var vm = new Vue({data: {items: ['a', 'b', 'c' , {k:1}]}
    })
    vm.items[1] = {a:1} // 不是响应性的 可以用vm.items[1].__ob__.dep.notify(); 触发上面的更新
    vm.items.length = 2 // 不是响应性的
    vm.items[3].k = 2 // 是响应式的
    
  7. 为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    
  8. 你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

    vm.$set(vm.items, indexOfItem, newValue)
    
  9. 为了解决第二类问题,你可以使用 splice:

    vm.items.splice(newLength)
    
  10. 由于 Vue 不允许动态添加根级响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值:

    var vm = new Vue({data: {// 声明 message 为一个空值字符串message: ''},template: '<div>{{ message }}</div>'
    })
    // 之后设置 `message`
    vm.message = 'Hello!'
    
  11. 如果你未在 data 选项中声明 messageVue 将警告你渲染函数正在试图访问不存在的 property
    这样的限制在背后是有其技术原因的,它消除了在依赖项跟踪系统中的一类边界情况,也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:data 对象就像组件状态的结构 (schema)。提前声明所有的响应式 property,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。

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

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

相关文章

Docker 47 个常见故障的原因和解决方法

本文针对Docker容器部署、维护过程中&#xff0c;产生的问题和故障&#xff0c;做出有针对性的说明和解决方案&#xff0c;希望可以帮助到大家去快速定位和解决类似问题故障。 Docker是一种相对使用较简单的容器&#xff0c;我们可以通过以下几种方式获取信息&#xff1a; 1、…

简单理解自动驾驶-看这篇够了!

本文主要介绍自动驾驶技术的整体框架&#xff0c;旨在从宏观理解自动驾驶技术。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;自动驾驶技术 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a…

第6章 现代通信技术

文章目录 6.1 图像与多媒体通信6.1.1 图像通信6.1.2 多媒体通信技术1、多媒体通信概念2、多媒体通信的组成3、多媒体通信的业务分类4、实用化的多媒体通信系统类型5、多媒体通信应用系统&#xff08;1&#xff09;多媒体会议电视系统&#xff08;2&#xff09;IPTV 6.2 移动通信…

【机器学习300问】12、为什么要进行特征归一化?

当线性回归模型的特征量变多之后&#xff0c;会出现不同的特征量&#xff0c;然而对于那些同是数值型的特征量为什么要做归一化处理呢&#xff1f; 一、为了消除数据特征之间的量纲影响 使得不同指标之间具有可比性。例如&#xff0c;分析一个人的身高和体重对健康的影响&…

每日一题——LeetCode1252.奇数值单元格的数目

进阶&#xff1a;你可以设计一个时间复杂度为 O(n m indices.length) 且仅用 O(n m) 额外空间的算法来解决此问题吗&#xff1f; 方法一 直接模拟&#xff1a; 创建一个n x m的矩阵&#xff0c;初始化所有元素为0&#xff0c;对于indices中的每一对[ri,ci]&#xff0c;将矩…

多色女童家居服,柔软细腻超舒适

柔软细腻到不想脱下来的 优可丝面料家居服来啦 精挑细选的可爱印花图案 让宝贝能够更快乐的进入梦乡 长度也是刚刚好合适 春夏交替的季节&#xff0c;建议多入几件换着穿

【新书推荐】Web3.0应用开发实战(从Web 2.0到Web 3.0)

第一部分 Flask简介 第1章 安装 1.1 创建应用目录 1.2 虚拟环境 1.2.1 创建虚拟环境 1.2.2 使用虚拟环境 1.3 使用pip安装Python包 1.4 使用pipregs输出包 1.5 使用requirements.txt 1.6 使用pipenv管理包 第2章 应用的基本结构 2.1 网页显示过程 2.2 初始化 2.3 路由和视图函数…

【C语言基础考研向】06运算符与表达式

文章目录 1.运算符分类 2.算术运算符及表达式 3.关系运算符与关系表达式 4.c语言运算级优先级表 课后习题自测 1.运算符分类 语言提供了13种类型的运算符,如下所示. (1)算术运算符( - * / %) . (2)关系运算符(>< >< l) . (3)逻辑运算符(l && ll) . (4)位…

一文了解【完全合作关系】下的【多智能体强化学习】

处于完全合作关系的多智能体的利益一致&#xff0c;获得的奖励相同&#xff0c;有共同的目标。比如多个工业机器人协同装配汽车&#xff0c;他们的目标是相同的&#xff0c;都希望把汽车装好。 在多智能体系统中&#xff0c;一个智能体未必能观测到全局状态 S。设第 i 号智能体…

c语言:用一个宏,可以将一个整数的二进制位的奇数位和偶数位交换。

题目 用一个宏&#xff0c;可以将一个整数的二进制位的奇数位和偶数位交换。 如&#xff1a;01&#xff0c;是1&#xff0c;交换完是10&#xff0c;是2. 思路 1.分别取出奇数位上的数字和偶数位上的数字 举个例子&#xff1a;1001 0110 1001 0110 奇…

javaScript设计模式-工厂

它的好处是消除对象间的耦合度&#xff0c;在派生子类时提供了更大的灵活性。但盲目的把普通的构造函数扔在一边&#xff0c;并不值得提倡。如果要采一不可能另外换用一个类&#xff0c;或都不需要在运行期间在一系列可互换的类中进行选择&#xff0c;就不应该使用。这样在后期…

基于android的违章处理APP 前后端服务 -毕业设计

基于android的违章处理APP 该项目是基于android版本的违章处理APP&#xff0c;系统包含前端android服务和后端web服务&#xff0c;内容和技术都是目前比较流行的架构。 技术介绍 前端android端&#xff1a; jdk17 gradle8.0 android studio 采用2023版本 后端web端&#xff…

手动添加测试用例配置输入参数和期望值

1.选中函数&#xff0c;点击右键选择插入测试用例。这里所选择的插入测试用例区别于之前的测试用例的地方在于&#xff0c;这里插入测试用例是手动配置的&#xff0c;之前的是自动生成的。手动配置可以自定义选择输入参数和期望值。 2.添加测试用例后&#xff0c;点击测试用例&…

FTP文件传输与vsftpd配置

一 存储类型 直连式存储DAS 适用于那些数据量不大&#xff0c;对磁盘访问速度要求较高的中小企业 存储区域网络SAN 用来存储非结构化数据&#xff0c;虽然受限于以太网的速度&#xff0c;但是部署灵活&#xff0c;成本低 网络附加存储NAS 适用于大型应用或数据库系统&…

进程间通信之利用命名管道进行通信

文章目录 什么是命名管道命名管道的作用有什么命名管道的特点和用法是什么命名管道与匿名管道有什么区别匿名管道相较于命名管道的局限性 命名管道如何使用代码 什么是命名管道 命名管道&#xff08;Named Pipe&#xff09;&#xff0c;也被称为FIFO&#xff08;First In, Fir…

宝藏排序1

题目 冒泡排序 import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();sc.nextLine();int[] res new int[n];for(int i0;i<n;i)res[i] sc.nextInt()…

C语言——整数和浮点数在内存中的存储

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 2.1 什么是大小端&#xff1f; 2.2 为什么有大小端? 2.3 练习 2.3.1 练习1 2.3.2 练习2 三、浮点数在内存中的存储 3.1练习 3.2 浮点数的存储 3.2.1浮点数存的过程 3.2.2浮点数取的过程 3.3 题目解…

provide和inject快速上手

应用案例 代码 点击弹窗1按钮&#xff0c;弹窗2出现 父组件 provide注入数据 // 弹窗1<Event ></Event> // 弹窗2<EventEvaluation v-if"isShowEventEvaluation"></EventEvaluation>const isShowEventEvaluation falseconst isShowEvent…

数学建模-预测人口数据

目录 中国09~18年人口数据 创建时间 绘制时间序列图 使用专家建模器 得到结果 预测结果 残差的白噪声检验 中国09~18年人口数据 创建时间 路径&#xff1a;数据-> 定义日期和时间 绘制时间序列图 使用专家建模器 看看spss最终判断是那个模型最佳的契合 得到结果 预…

【2024最新-python3小白零基础入门】No4.python控制语句学习

文章目录 1 选择结构1.1 if语句 2 循环结构2.1 while循环语句2.2 for循环语句2.3 break、continue、pass在循环中的用途 对于 Python 程序中的执行语句,默认是按照书写顺序依次执行的,这时称这样的语句是顺序结构的。但是,仅有顺序结构还是不够的,因为有时需要根据特定的情况,有…