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-router 起步步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
对于前后端分离的项目,为了统一响应参数,需要将图片转换成base64的格式,下面这篇文章主要给大家介绍了关于vue图片转base64格式的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了Vue.JS入门教程之自定义指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue如何根据数值判断颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了搭建Vue从Vue-cli到router路由护卫的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Vuex的官方解释是一个专为vue.js应用程序开发的状态管理模式，这篇文章主要为大家介绍了Vuex的具体用法，希望对大家深入了解Vuex有一定的帮助2023-06-06
前后端分离进行项目开发,跨域问题不可避免,下面这篇文章主要给大家介绍了关于vue中前端代理跨域问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要为大家介绍了Vue之MVVM,模板语法和数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue Cli 3项目 使用融云IM实现聊天功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了一看就会的vuex实现登录验证（附案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
最新评论