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属于基础类型时会触发提示。 这种情况下，你是无法修改父组件的数据源的， 因为基础类型赋值时是值拷贝。 当修改引用类型的属性时不会触发提示，并且会修改父组件数据源的数据。
以上就是vue中data和props的区别详解的详细内容，更多关于vue data和props区别的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue用mixin合并重复代码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Vue3 el-switch @change事件在初始化时会自动调用问题处理的多种方法
本文介绍Vue3中Switch切换确认弹窗的两种实现方法：方法一通过before-change拦截器精准控制（推荐）；方法二用初始化状态标识兼容旧项目,并提供统一封装方案,适用于ElementPlus/NaiveUI等组件,感兴趣的朋友一起看看吧2025-07-07
这篇文章主要介绍了vue的token刷新处理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue 自动化路由实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
vue3+springboot部署到Windows服务器的详细步骤
这篇文章主要介绍了vue3+springboot部署到Windows服务器,配置Nginx时，因为现在是把vue前端交给了Nginx代理，所以这里的端口号不一定是我们在vue项目中设置的端口号，本文给大家介绍的非常详细，需要的朋友参考下吧2022-10-10
VScode更新后安装vetur仍无法格式化vue文件的解决
这篇文章主要介绍了VScode更新后安装vetur仍无法格式化vue文件的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能
支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue如何实现简易的弹出框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue2.5.2使用http请求获取静态json数据的实例代码
这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下2018-02-02
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用，今天通过本文给大家介绍移动端调试神器vConsole使用，感兴趣的朋友一起看看吧2022-04-04
最新评论