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.部…

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

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

计算机组成原理综合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资源互助共享平台的设计

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

推荐给前端开发的 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…

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

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

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

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

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

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

【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,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 不论面试还是实际工作中…

信息安全等级保护的定义与意义

目录 前言 信息安全等级保护定义 广义上 狭义上 技术和管理 信息安全的基本要素 信息安全等级保护的意义 当前形式 形式严峻 国家安全 三个基本一个根本 预期目标 最终效果 实际意义 前言 信息安全等级保护是对信息和信息载体按照重要性等级分级进行保护的一种…

Windows平台开发需要掌握的基础知识

windows本身也是一个软件。在这个软件中进行开发时,我们需要对它有个基础的了解,这样能让我们的开发过程更顺畅一些。 下面我就来说一下我们需要关注的基础知识点。 环境变量 有时候我们的程序执行,需要基于一些基础的库。比如Java运行&am…

matlab 最小二乘拟合平面(直接求解法)

目录 一、算法原理二、代码实现三、算法效果本文由CSDN点云侠原创,原文链接。爬虫网站自重。 一、算法原理 平面方程的一般表达式为: A x + B y +

【Skynet 入门实战练习】事件模块 | 批处理模块 | GM 指令 | 模糊搜索

文章目录 前言事件模块批处理模块GM 指令模块模糊搜索最后 前言 本节完善了项目,实现了事件、批处理、模糊搜索模块、GM 指令模块。 事件模块 什么是事件模块?事件模块是用来在各系统之间传递事件消息的。 为什么需要事件模块?主要目的是…

Spring源码分析 @Autowired 是怎样完成注入的?究竟是byType还是byName亦两者皆有

1. 五种不同场景下 Autowired 的使用 第一种情况 上下文中只有一个同类型的bean 配置类 package org.example.bean;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration;Configuration public class FruitCo…