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