data数据响应式

data数据响应式

所有在实例上挂载的属性,都可以在视图中直接使用

data中的数据,是经过“数据劫持”的,是“响应式数据

响应式:修改数据,视图会自动更新

MV原理:其中一条线的原理,data响应式的原理

template

  • 小胡子语法
  • v-指令

小胡子语法{{}}

{{}}中:

window上的少数方法:一些数据类型转换的方法

react:数字 字符串,原始值/其他类型都渲染为空。

vue&react底层渲染机制不一样

Object.defineProperty

对象成员的规则限制*

enumerable:能够被for-in或Object.keys迭代到的

configurable:是否可删除。能否通过delete删除

自定义的私有属性规则:可枚举 可删除 可修改

浏览器内置的属性规则:不可枚举 可删除 可修改

设置成员

内置类的原型上扩展一些方法:

对象中的某个成员做数据劫持*

先把数据克隆一份,set/get都是改克隆的那份

直接从堆内存中拿信息=>获取/设置都劫持到半路上(通知视图更新)

ps.劫持和value writable相互冲突

响应式数据*

前置了解:MVVM&单文件组件

属性:既不可更改,也不可删除(configurable/writable)

新增属性:也不能新增了

  1. 深递归

  1. 若冻结,那么其内部属性不再进行属性劫持
  2. Object.keys:可枚举 非Symbol 私有

  1. 数组:原型重定向。重写数组的原型指向

例子:

  1. 劫持阶段:发生在new Vue阶段。

$set: 

  1. 新增加的属性
  2. 已有属性,无效
  3. 对数组索引

例子:改数组

源码实现

首先只处理数组和对象,分为数组&对象

数据驱动,然后视图更新。数据改完之后一定要视图更新

数组

重写原型:重写原型指向,自己构造了一个原型对象;

自己构造的原型对象:重写了7个方法=>先调用原始的数组原型链上的方法以实现数据层面的更新;然后compiler视图更新

而且是深递归

对象

  1. Object.keys遍历;然后递归

defineReactive只做当前层

data是最高层,x y是属性

  1. 设置值的时候也需要observe

  1. 深层次的递归和劫持
  2. 冻结对象不做劫持
  3. 数组来讲,并不是对每一项索引项进行劫持,而是重写原型指向(7个方法)
  4. 对象来讲,Object.keys可枚举&非Symbol类型属性
  5. 新set值也会进行劫持。重新来一遍

vue自身的源码:

符合条件,才会observer类。能执行到observer里的,要么是对象要么是数组。

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

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

相关文章

Nessus详细安装-windows (保姆级教程)

Nessus描述 Nessus 是一款广泛使用的网络漏洞扫描工具。它由 Tenable Network Security 公司开发,旨在帮助组织评估其计算机系统和网络的安全性。 Nessus 可以执行自动化的漏洞扫描,通过扫描目标系统、识别和评估可能存在的安全漏洞和弱点。它可以检测…

DRF从入门到精通三(反序列化数据校验源码分析、断言Assert、DRF之请求、响应)

文章目录 一、反序列化数据校验源码分析二、断言Assert三、DRF之请求、响应Request类和Response类请求中的Request 能够解析前端传入的编码格式响应中的Response能够响应的编码格式 一、反序列化数据校验源码分析 反序列化数据校验,校验顺序为:先校验字段…

Go后端开发 -- Golang的语言特性

Go后端开发 – Golang的语言特性 文章目录 Go后端开发 -- Golang的语言特性一、Golang的优势1.部署极其简单:2.静态语言3.语言层面的并发4.强大的标准库5.简单易学6.运行效率对比 二、Golang的适用领域1.应用领域2.明星产品 三、Golang的不足 一、Golang的优势 1.部…

共享购:消费前沿的领导者

在当今这个信息化、互联网高速发展的时代,商业模式也在不断地创新和变革。共享购模式作为一种新型的商业模式,正逐渐受到广泛的关注和追捧。本文将深入探讨共享购模式的核心理念、优势以及如何应用在实际商业场景中,为读者揭示这一模式的巨大…

python爬虫进阶篇:Scrapy中使用Selenium模拟Firefox火狐浏览器爬取网页信息

一、前言 接着上一篇的笔记,Scrapy爬取普通无反爬、静态页面的网页时可以顺利爬取我们要的信息。但是大部分情况下我们要的数据所在的网页它是动态加载出来的(ajax请求后传回前端页面渲染、js调用function等)。这种情况下需要使用selenium进…

计算机组成原理综合5

A 按照题意,程序P执行的时钟周期数为1000080%11000020%1028000,程序P的平均CPI为28000/100002.8,计算机主频为1GHz,CPU执行时间为28000/(1G/s)28μs。 B A 符号位为1 首先将0.4375转化为二进制,0.250.1250.06250.43…

nodejs+vue+ElementUi资源互助共享平台的设计

后台:管理员功能有个人中心,用户管理,卖家管理,咨询师管理,萌宝信息管理,幼儿知识管理,保姆推荐管理,音频资源管理,二手商品管理,商品分类管理,资…

医疗行业的运维方案:解决IT监控、资产管理困难

一、导语 医疗行业信息化数字化转型近年来已经取得了一定的进展。越来越多的医疗机构开始引入信息化技术,提高医疗服务的质量和效率。例如,电子病历、移动医疗、远程医疗等已经成为医疗行业信息化数字化转型的重要标志。 然而,医疗行业信息化…

K8s 教程

一文让你全面了解K8s(Kubernetes) - 知乎 Install and Set Up kubectl on Linux | Kubernetes 留存一份地址

推荐给前端开发的 5 款 Chrome 扩展

工欲善其事,必先利其器。Chrome 可能是前端开发中使用最多的浏览器。在日常开发中,下列几款 Chrome 扩展也许能让你的开发工作事半功倍 🚀 Vue.js devtools ⚙️ vue 官方专为 vue 应用开发的调试工具。 通过使用它,你可以快速查看…

力扣单调栈算法专题训练

目录 1 专题说明2 训练 1 专题说明 本博客用来计算力扣上的单调栈题目、解题思路和代码。 单调栈题目记录: 2232866美丽塔II 2 训练 题目1:2866美丽塔II。 解题思路:先计算出prefix[i],表示0~i满足递增情况下,0~i…

NC65 查询单据所处的流程状态以及流程平台客户端工具类

1、查询单据所处的流程状态 nc.bs.wfengine.engine.EngineService的queryFlowStatus()方法 /*** 查询单据所处的流程状态* * param billId* param billType* param result* return* throws DbException*/public int queryFlowStatus(String billId, String billType, int flo…

Redis 有序集合(sorted set)常见问题

zRevRange排序不对问题 返回有序集中指定区间内的成员,通过索引,分数从高到低。注意这里是根据索引和分数。所以索引是单独的数字就有问题。加一个前缀字母就解决,列如Uxxx。 分数相同的排名问题 先入库在前面,后入库在后面解决方案 取几年以…

【UML】第8篇 用例图(3/3)

目录 一、用例的关系 1.1 泛化(Generalization)关系 1.2 包含(include)关系 1.3 扩展关系 二、用例表示例 不是非要把电影改成连续剧,给大家播,确实是时间和精力有限。 用例图,虽然简单&…

荣誉 | 第七在线(7thonline)荣获STIF2023年度数智化创新典范奖

12月15日,STIF2023 第四届国际科创节暨 DSC2023 国际数字服务大会(数服会)在北京隆重举行。 在本届科创节暨数服会活动评选中,经企业申报、评委会审议,第七在线(7thonline)AI智能零售商品计划库…

什么是集成测试?它和系统测试的区别是什么? 操作方法来了

01 什么是集成测试? 集成测试是软件测试的一种方法,用于测试不同的软件模块之间的交互和协作是否正常。集成测试的主要目的是确保不同的软件模块能够无缝协作,形成一个完整的软件系统,并且能够满足系统的需求和规格。 在集成测试…

typeorm联表查询:副表json格式放到主表字段下或多个副表字段并列主表字段

实体类字段不做映射,typeorm实现联查查询 1、副表json格式放到主表字段下 //goods表和member表联表,关系goods.id member.uid,member表数据json对象格式放到主表userInfo下 //leftJoinAndMapOne配合getMany实现 const builder await getCo…

【3D生成与重建】SSDNeRF:单阶段Diffusion NeRF的三维生成和重建

系列文章目录 题目:Single-Stage Diffusion NeRF: A Unified Approach to 3D Generation and Reconstruction 论文:https://arxiv.org/pdf/2304.06714.pdf 任务:无条件3D生成(如从噪音中,生成不同的车等)、…

[C++]模板进阶

目录 C模板进阶:: 非类型模板参数 模板的特化 函数模板特化 类模板特化 全特化 偏特化 模板的分离编译 模板总结 C模板进阶:: 非类型模板参数 模板参数可分为类型形参和非类型形参。 类型形参:出现在参数列表中&am…

浅谈Redis分布式锁(上)

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 不论面试还是实际工作中…