<强>前言
前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中数据的初始值导致,而数据的初始值来自于道具。为方便描述,现将问题抽象如下:
<强>一、现象
代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>用道具初始化数据中变量& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.5.16/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;用户信息:用户和数据=" https://www.yisu.com/zixun/user "祝辞& lt;/user-info>
& lt;/div>
& lt; script>//全局组件
让用户信息=Vue.component(“用户信息”,{
名称:“用户信息”,
道具:{
用户数据:对象
},
数据(){
返回{
用户名:this.userData.name
}
},
模板:
& lt; div>
& lt; div>姓名:{{userName}} & lt;/div>
& lt; div>性别:{{userData.gender}} & lt;/div>
& lt; div>生日:{{userData.birthday}} & lt;/div>
& lt;/div>
”
});//Vue实例
新Vue ({
埃尔:“#应用”,
数据:{
用户:{
名称:”,
性别:”,
生日:“
}
},
创建(){
this.getUserData ();
},
方法:{
getUserData () {
setTimeout(()=祝辞{
这一点。用户={
名称:“于永雨”,
性别:男,
生日:1991 - 7
}
},500)
}
},
组件:{
用户信息
}
});
& lt;/script>
& lt;/body>
& lt;/html>
代码解读:
<李>根组件数据中有一个对象:用户,包含三个属性:姓名,性别,生日,初始值都为空字符串李
<李>模拟api异步请求,500毫秒后对用户的重新赋值,三个属性都不再为空
<李>声明一个子组件用户信息,道具中有一个对象用户数据,用于接收父组件的用户,数据中有一个变量用户名、初始值来自于userData.name李
结果:
页面初始化后,姓名:性别,生日都显示为空,500毫秒后性别和生日显示正常结果,仅姓名没有变化。
为什么会这样呢?
<强>我最初的想法:user.name是字符串,属于基本数据类型,用它给子组件数据中用户名赋值,属于基本数据类型赋值,所以当父组件中user.name变化时,子组件中用户名并不会随之变化。
是这样的吗?于是我决定将user.name改为对象,通过引用数据类型赋值,然后观察是否符合预期。代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>用道具初始化数据中变量——对象形式& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.5.16/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;用户信息:用户和数据=" https://www.yisu.com/zixun/user "祝辞& lt;/user-info>
& lt;/div>
& lt; script>//全局组件
让用户信息=Vue.component(“用户信息”,{
名称:“用户信息”,
道具:{
用户数据:对象
},
数据(){
返回{
用户名:this.userData.name
}
},
模板:
& lt; div>
& lt; div>姓名:{{userName.text}} & lt;/div>
& lt; div>性别:{{userData.gender}} & lt;/div>
& lt; div>生日:{{userData.birthday}} & lt;/div>
& lt;/div>
”
});//Vue实例
新Vue ({
埃尔:“#应用”,
数据:{
用户:{
名称:{文本:"},
性别:”,
生日:“
}
},
创建(){
this.getUserData ();
},
方法:{
getUserData () {
setTimeout(()=祝辞{
这一点。用户={
名称:{文本:“于永雨”},
性别:男,
生日:1991 - 7
}
},500)
}
},
组件:{
用户信息
}
});
& lt;/script>
& lt;/body>
& lt;/html>
运行结果:姓名仍然没有值,和第一次结果一样! ! !
<强>二,原因
那么,原因到底是什么呢?百思不得解,后来和小伙伴们讨论时,有人提出:会不会因为数据在初始化时深拷贝?
