vue中data和props的区别

一、两者区别

区别一:

data不需要用户(开发者)传值,自身维护

props需要用户(开发者)传值

区别二:

1、data上的数据都是可读可写的,

2、props上的数据只可以读的,无法重新赋值

二、props为什么不能修改

因为Vue是单向数据流,为了保证数据的单向流动,便于对数据的追踪,出现了错误可以更加迅速的定位到错误发生的位置。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

三、Vue是如何监控props属性被子组件修改并给出警告的

在组件 initProps 方法的时候,会对props进行defineReactive操作,传入的第四个参数是自定义的set函数,该函数会在触发props的set方法时执行,当props修改了,就会运行这里传入的第四个参数,然后进行判断,如果不是root根组件,并且不是更新子组件,那么说明更新的是props,所以会警告。

if (process.env.NODE_ENV !== 'production') {var hyphenatedKey = hyphenate(key);if (isReservedAttribute(hyphenatedKey) ||config.isReservedAttr(hyphenatedKey)) {warn(("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),vm);}defineReactive$$1(props, key, value, function () {if (!isRoot && !isUpdatingChildComponent) {warn("Avoid mutating a prop directly since the value will be " +"overwritten whenever the parent component re-renders. " +"Instead, use a data or computed property based on the prop's " +"value. Prop being mutated: \"" + key + "\"",vm);}});
}

需要注意,当从子组件修改的prop属于基础类型时会触发提示。 这种情况下,你是无法修改父组件的数据源的, 因为基础类型赋值时是值拷贝。 当修改引用类型的属性时不会触发提示,并且会修改父组件数据源的数据。

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

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

相关文章

Qt固件映像 Raspberry Pi 嵌入式C++(Qt)编程

Qt C创建突围游戏应用示例 在我们的游戏中,我们有一个桨、一个球和三十块砖。 计时器用于创建游戏周期。 我们不处理角度,我们只是改变方向:上、下、左、右。 Qt5 库是为创建计算机应用程序而开发的。尽管如此,它也可以用来创建…

Java导出Excel并合并单元格

需求:需要在导出excel时合并指定的单元格 ruoyi excel 项目基于若伊框架二次开发,本着能用现成的就不自己写的原则,先是尝试了Excel注解中needMerge属性 /*** 是否需要纵向合并单元格,应对需求:含有list集合单元格)*/public boolean needMer…

SpringBoot缓存相关注解的使用

CacheConfig:主要用于配置该类中会用到的一些共用的缓存配置 Cacheable:主要方法的返回值将被加入缓存。在查询时,会先从缓存中获取,若不存在才再发起对数据库的访问 CachePut:主要用于数据新增和修改操作 CacheEvi…

4人遇难,北京突发火情 富维烟火识别防止悲剧再次发生

在北京一处居民区,一场突如其来的火灾夺走了四条宝贵的生命。火情迅速蔓延,烟雾弥漫,居民们猝不及防。这一悲剧再次提醒我们,火灾预防和早期识别的重要性不容忽视。 在这样的背景下,北京富维图像公司开发的FIS智能图像…

搭建自己的媒体矩阵-关于三微一端的媒体矩阵最简方案

引言 随着互联网的快速发展,媒体矩阵已成为品牌宣传的重要战略。通过搭建自己的媒体矩阵,企业、品牌和个人能够更有效地触达目标受众,传递信息、建立品牌形象,并与用户进行深度互动。本文将深入探讨如何制定一个有效的三微一端媒…

kafka入门(八):副本

副本 kafka 副本之间是 一主多从的关系。 其中 leader 副本负责处理读写请求,follower 副本只负责与 leader 副本的消息同步。 副本处于不同的 broker中,当 leader 副本出现故障时,从 follower 副本中重新选举新的 leader 副本对外提供服务…

2024 年 Vue.js 会发生什么?

就像前端开发世界的其他部分一样,Vue 世界发展得很快。在这篇文章中,我想了解一下 Vue 的现状,并分享我对 2024 年发展趋势的预测。 Vue 2 生命周期结束 随着 Vue.js 社区的不断发展,2024 年标志着 Vue 2 生命周期的结束&#x…

高光谱分类论文解读分享之Grid Network: 基于各向异性视角下特征提取的高光谱影像分类

IEEE GRSL 2023:Grid Network: 基于各向异性视角下特征提取的高光谱影像分类 题目 Grid Network: Feature Extraction in Anisotropic Perspective for Hyperspectral Image Classification 作者 Zhonghao Chen , Student Member, IEEE, Danfeng Hong , Senior …

【H3C】配置AAA认证和Telnet远程登陆,S5130 Series交换机

AAA配置步骤为: 1.开启telent远程登陆服务 2.创建用户,设置用户名、密码、用户的服务类型 3.配置终端登录的数量 4.配置vlan-if的ip地址,用来远程登陆 5.允许对应的vlan通过 1.开启telent远程登陆服务 sys …

【驱动】I2C驱动分析(四)-关键API解析

简介 在Linux内核源代码中的driver目录下包含一个i2c目录 i2c-core.c这个文件实现了I2C核心的功能以及/proc/bus/i2c*接口。   i2c-dev.c实现了I2C适配器设备文件的功能,每一个I2C适配器都被分配一个设备。通过适配器访设备时的主设备号都为89,次设备号…

PBR材质纹理下载

03:10 按照视频里的顺序 我们从第6个网站开始倒数 点击本行文字或下方链接 进入查看 6大网站地址 网址查看链接: http://www.uzing.net/community_show-1962-48-48-35.html 06 Tectures Wood Fence 001 | 3D TEXTURES 简介:最大的纹理网站之一&#x…

axios的使用以及Vue动画

axios 的使用 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库&#xff0c;可以用在浏览器和 node.js 中。 安装方法 使用 npm: npm install axios 引入 import axios from “axios”; <script> import {defineComponent} from…

机器学习:BootStrapping(Python)

import numpy as np import pandas as pd from sklearn.neighbors import KNeighborsClassifier from sklearn.decomposition import PCA # 主成分分析 from sklearn.preprocessing import LabelEncoder, StandardScaler # 类别标签编码&#xff0c;标准化处理 import matplo…

推荐算法常见的评估指标

推荐算法评估指标比较复杂&#xff0c;可以分为离线和在线两部分。召回、粗排、精排和重排由于定位区别&#xff0c;其评估指标也会有一定区别&#xff0c;下面详细讲解。 1 召回评价体系 召回结果并不是最终推荐结果&#xff0c;其本质是为后续排序层服务的&#xff0c;故核…

_198打家劫舍

_198打家劫舍 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;_198打家劫舍_198打家劫舍_滚动数组_198打家劫舍_滚动优化 参考代码&#xff1a;错误经验吸取 原题链接&#xff1a; _198打家劫舍 https://leetcode.cn/problems/house-robber/submissions/4964…

中国联通助力吴江元荡生态岸线打造5G+自动驾驶生态长廊

吴江&#xff0c;素有“鱼米之乡”“丝绸之府”的美誉&#xff0c;其地理位置优越&#xff0c;地处太湖之滨。近年来&#xff0c;随着长三角生态绿色一体化发展示范区&#xff08;以下简称“示范区”&#xff09;的建立&#xff0c;元荡更是声名大噪&#xff0c;成为众多游客心…

GNU Radio简介及流程图搭建

文章目录 前言一、GNU Radio 是什么&#xff1f;二、GNU Radio 安装三、搭建第一个流程图1、创建 GRC 文件2、添加块3、运行流程图 前言 欢迎来到无线通信的世界&#xff0c;初步接触 GNU Radio&#xff0c;对其学习进行一个记录。 一、GNU Radio 是什么&#xff1f; GNU Rad…

Git 在 SSH 协议下使用代理

关于 Git 使用 Proxy , 网上很多教程讲的都是 如何设置 Http 下 Git 使用 Proxy , 但是并没有提到 SSH 下如何使用 Proxy . 即便有些文章讲到了, 也有不少是 Windows 平台下的, Linux 平台下的很少提及, 所以这里就记录一下, 如何在 Ubuntu 中, 使用 Git 在 SSH 协议下应用代理…

el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)

如下图,我们现在全勾中的有表格管理及其下的子级,而半勾中的有工作台和任务管理及其子级 现在点击保存按钮后,需要将勾中的节点id及该节点对应的父节点,祖先节点的id(包含半选中父节点的id)也都一并传给后端,那这个例子里就应该共传入9个id,我们可以直接将getCheckedK…

SpringMVC 拦截器

文章目录 1、拦截器的配置2、拦截器的三个抽象方法3、多个拦截器的执行顺序总结 Spring MVC 拦截器是Spring框架中的一种机制&#xff0c;用于在请求到达处理器之前和渲染视图之前拦截请求&#xff0c;并允许开发者在这两个时间点进行自定义的处理逻辑。拦截器与过滤器&#xf…