vue中data和props的区别详解
更新时间：2024年01月19日 09:56:46 作者：程序员-小许
这篇文章主要介绍了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 中使用 AJAX获取数据的方法，在VUE开发时，数据可以使用jquery和vue-resource来获取数据，有兴趣的可以了解一下。2017-01-01
element ui设置table自适应表格宽,不自动换行问题
这篇文章主要介绍了element ui设置table自适应表格宽,不自动换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
下面小编就为大家分享一篇Vue实现动态创建和删除数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
今天小编就为大家分享一篇vue自定义switch开关组件,实现样式可自行更改，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了element-ui中table表格的折叠和隐藏方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue中keep-alive 实现后退不刷新并保持滚动位置的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了浅谈vue权限管理实现及流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为
这篇文章主要介绍了vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为,其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
最新评论