Vue中用props给data赋初始值遇到的坑

情景：
我想在父组件用props传值给子组件几个值来控制子组件中对应的几个类目的显示和隐藏，几个类目是子组件中通过data里的一个数组的数据循环出来的，所以一开始我想在子组件那个数组中添加一个公共的属性名，值就取拿回来的props值，在dom里通过这个新增的属性的取值（也就是传回来的props值）动态的控制几个类目展示不展示即可，然后就掉坑里了。。。。。

父组件：
     <child 
		:first="first"			// 传值给子组件的值
		:second="second"
		:third="third"
		>
     </child>

	data(){
		return{
			first:1,			//data中初始化数据
			second:1,
			third:1
	}
}

	methods:{
		getData(params)				//请求接口数据给传的参赋值
		       .then((response)=>{
			this.first = response.first
			this.second = response.second
			this.third = response.third
})
}

子组件：
	//dom结构通过取到的props值来控制类目的隐藏显示
	<div v-for="(item,index) in sideData" :key="index">
		<div :style="{display:item.status==0 ? 'none': 'block'}">{{item.name}}</div>
	</div>
	
	props:{
		first:{
		  type:Number,
		  default:function(){
		    return 0
		  },
		},
		second:{			//second、third和first同理
		},
		third:{
		},
}
	data(){
	  return{
		 sideData:[
			{
				name:'1',
				status:first,			//新起的一个属性名，并且拿取到的props赋值
			},
			{
				name:'2',
				status:second,	
			},
			{
				name:'3',
				status:third,	
			},
				]
		}
	}

结果：

发现子组件的类目并不会随着props的变化而变化，结果并不能达到预期，是因为在data中声明局部变量，并用props初始化，局部变量不随着props更新而更新
我换了种方法实现并实现一些优化，亲测有效！！！

父组件：
	<child 
		：content="content"		//把多个数据放到一个数组中一起传
		>
     </child>

	data(){
		return{
			content:[{'1',isShow},{'2',isShow},{'3',isShow}]
	}
}

	methods:{
		getData(params)				
		       .then((response)=>{
			this.content.map((item,index)=>{	//遍历要传参的这个数组，满足对应条件给赋值
			  if('满足对应的条件'){
			  	this.content[index].isShow = false
			  }
			})
})
}

子组件：
	<div v-for="(item,index) in sideData" :key="index">
		<div :style="{display:item.isShow == true ? 'block': 'none'}">{{item.name}}</div>
	</div>
	
	props:{
		content:{
		  type:Array,
		  default:function(){
		    return []
		  },
		},
}
	data(){
	  return{
		 sideData:[
			{
				name:'1',
				isShow:true,			// 统一添加一个公共的属性名
			},
			{
				name:'2',
				isShow:true,,	
			},
			{
				name:'3',
				isShow:true,	
			},
				]
		}
	}

	watch:{
		handler(newVal){
			let arr = [...this.sideData];	//这步是为了避免修改新对象数组改变原对象数组
			arr.map((item)=>{
				newVal.map((_item)=>{
				  if(item.id == _item.id){
				     item = _item
				  }
				})
			})
			this.sideData = [...arr]
		},
		deep:true
		immediate:true
}

结论：

注意：

• 在data中声明局部变量，并用props初始化，局部变量不随着props更新而更新
• 使用watch、computed 监听和计算，转换后输出
• 赋值的时候，记得不要改变原数组