本篇文章给大家带来的内容是关于Vue中用props给data赋初始值时遇到的问题及解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
前段时间做一个运营活动的项目，上线后产品反馈页面埋点不对，在排查过程中发现，问题竟然是由于Vue中的data初始值导致，而data的初始值来自于props。为方便描述，现将问题抽象如下：
一、现象
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用props初始化data中变量</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<user-info :user-data="user"></user-info>
</div>
<script>
//全局组件
let userInfo = Vue.component('userInfo' ,{
name: 'user-info',
props: {
userData: Object
},
data() {
return {
userName: this.userData.name
}
},
template: `
<div>
<div>姓名：{{userName}}</div>
<div>性别：{{userData.gender}}</div>
<div>生日：{{userData.birthday}}</div>
</div>
`
});
//Vue实例
new Vue({
el: '#app',
data: {
user: {
name: '',
gender: '',
birthday: ''
}
},
created(){
this.getUserData();
},
methods:{
getUserData(){
setTimeout(()=>{
this.user = {
name: '于永雨',
gender: '男',
birthday: '1991-7'
}
}, 500)
}
},
components: {
userInfo
}
});
</script>
</body>
</html>
代码解读：
根组件data中有一个对象：user，包含三个属性：name、gender、birthday，初始值都为空字符串
模拟api异步请求，500毫秒后对user的重新赋值，三个属性都不再为空
声明一个子组件userInfo，props中有一个对象userData，用于接收父组件的user；data中有一个变量userName，初始值来自于userData.name
结果：
页面初始化后，姓名、性别、生日都显示为空，500毫秒后性别和生日显示正常结果，仅姓名没有变化。
为什么会这样呢？
我最初的想法：user.name是String，属于基本数据类型，用它给子组件data中userName赋值，属于基本数据类型赋值，所以当父组件中user.name变化时，子组件中userName并不会随之变化。
是这样的吗？于是我决定将user.name改为对象，通过引用数据类型赋值，然后观察是否符合预期。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用props初始化data中变量-对象形式</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<user-info :user-data="user"></user-info>
</div>
<script>
//全局组件
let userInfo = Vue.component('userInfo' ,{
name: 'user-info',
props: {
userData: Object
},
data() {
return {
userName: this.userData.name
}
},
template: `
<div>
<div>姓名：{{userName.text}}</div>
<div>性别：{{userData.gender}}</div>
<div>生日：{{userData.birthday}}</div>
</div>
`
});
//Vue实例
new Vue({
el: '#app',
data: {
user: {
name: {text: ''},
gender: '',
birthday: ''
}
},
created(){
this.getUserData();
},
methods:{
getUserData(){
setTimeout(()=>{
this.user = {
name: {text: '于永雨'},
gender: '男',
birthday: '1991-7'
}
}, 500)
}
},
components: {
userInfo
}
});
</script>
</body>
</html>
运行结果：姓名仍然没有值，和第一次结果一样！！！
二、原因
那么，原因到底是什么呢？百思不得解，后来和小伙伴们讨论时，有人提出：会不会因为data在初始化时深拷贝？
我觉得这种解释比较靠谱，于是去收集证据，首先去Vue官网翻了一下关于data的文档，其中：
当看到"递归地"那个词，基本上就能断定上面的推论是正确的，因为深拷贝的核心原理就是递归。
原来，Vue初始化时会递归地遍历data所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter，用于实现双向绑定。官方文档在Reactivity in Depth一章明确有说：
还顺便解释了一下为什么Vue不支持IE8的原因：IE8不支持Object.defineProperty。
三、解决办法
既然因为data深拷贝的原因，data无法随着props的变化而更新，我们很自然的就想到Vue中有监听作用的两个功能：watch、computed。
修改代码如下，观察结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决方案：watch、computed</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<user-info :user-data="user"></user-info>
</div>
<script>
//全局组件
let userInfo = Vue.component('userInfo' ,{
name: 'user-info',
props: {
userData: Object
},
data() {
return {
userName: this.userData.name
}
},
computed: {
computedUserName(){
return this.userData.name
}
},
watch: {
'userData.name': function (val) {//监听props中的属性
this.userName = val;
}
},
template: `
<div>
<div>姓名(watch)：{{ userName }}</div>
<div>姓名(computed)：{{ computedUserName }}</div>
<div>性别：{{ userData.gender }}</div>
<div>生日：{{ userData.birthday }}</div>
</div>
`
});
//Vue实例
new Vue({
el: '#app',
data: {
user: {
name: '',
gender: '',
birthday: ''
}
},
created(){
this.getUserData();
},
methods:{
getUserData(){
setTimeout(()=>{
this.user = {
name: '于永雨',
gender: '男',
birthday: '1991-7'
}
}, 500)
}
},
components: {
userInfo
}
});
</script>
</body>
</html>
运行结果
完美！！！
四、总结：关于Vue中props的要点
事后又仔细翻了一下关于props的文档：
大概梳理一下：
1.props是单向数据流：父组件的数据变化，通过props实时反应在子组件中，反之不然
2.不允许在子组件中直接操作props
3.可以变相操作props
（1）在data中声明局部变量，并用props初始化，弊端：局部变量不随着props更新而更新
（2）在computed中对props值转换后输出
以上是Vue中用props给data赋初始值时遇到的问题及解决方法的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AMJavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AMPython更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AMPython和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
SublimeText3汉化版
中文版，非常好用
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
