vue中是以数据驱动视图的，数据主要存在于props，data，computed和watch中，当然还有vuex中，这里先不探讨vuex的数据
props在组件模板template中使用
<template>
<div>
<div>{{title}}</div>
</div>
</template>
<script>
export default {
name:'',
props:{
title:{
type:[String,Number],
default:"liuhao"
}
}
}
</script>
props是父组件传入的数据，props的值可以直接在template中使用，当父组件的title发生变化时，子组件会响应变化
props在computed中使用
<template>
<div>
<div>{{title}}</div>
<div>{{title02}}</div>
</div>
</template>
<script>
export default {
name:'',
props:{
title:{
type:[String,Number],
default:"liuhao"
}
},
computed:{
title02:function(){
return this.title+"computed"
}
}
}
</script>
props在computed中使用时与直接在template中使用的效果一直，当父组件的title值发生变化时title02也会响应数据变化，模板template中的数据会跟着发生变化
props在data中使用
想在组件中直接修改props是不允许的，vue会报如下错误
这个错误是因为vue遵循单项数据流规范，简单来讲就是数据从父组件传的值不可以在子组件中直接修改，只可以直接使用，如果想修改props的属性值必须通过父组件修改props的值或者赋给data，赋给data后就相当于拷贝了一份props数据，data中的数据与props中的数据就不存在从属关系
<template>
<div>
<div>{{title}}</div>
<div>{{title02}}</div>
<div>{{titleCopy}}</div>
</div>
</template>
<script>
export default {
name:'',
props:{
title:{
type:[String,Number],
default:"liuhao"
}
},
data(){
return {
titleCopy:this.title
}
},
computed:{
title02:function(){
return this.title+"computed"
}
}
}
</script>
需要注意：这种使用方式data中的titleCopy不会响应props中title的变化，当title发生变化时，titleCopy依然保持初始化组件似的值，如果想让data中的titleCopy响应数据变化，就需要在watch中监听title的变化
<template>
<div>
<div>{{title}}</div>
<div>{{title02}}</div>
<div>{{titleCopy}}</div>
</div>
</template>
<script>
export default {
name:'',
props:{
title:{
type:[String,Number],
default:"liuhao"
}
},
data(){
return {
titleCopy:this.title
}
},
computed:{
title02:function(){
return this.title+"computed"
}
},
watch:{
title:function(news){
this.titleCopy = news
}
}
}
</script>
监听title数据变化，然后重新赋值给data中的titleCopy，这样就能保证props与data同步变化
data值在computed中使用
这种情况只要data中的值发生变化computed就会响应数据变化
<template>
<div>
<div>{{title}}</div>
<div>{{title02}}</div>
<div>{{titleCopy}}</div>
</div>
</template>
<script>
export default {
name:'',
props:{
title:{
type:[String,Number],
default:"liuhao"
}
},
data(){
return {
titleCopy:this.title
}
},
computed:{
title02:function(){
return this.titleCopy+"computed"
}
},
watch:{
title:function(news){
this.titleCopy = news
}
}
}
</script>
data值在watch中使用
data中的数据变化会触发watch中的监听执行，如果要执行某种操作可以使用该种监听方式，但是如果只是想得到data数据的变种数据建议在computed中做计算属性
watch可以监听props，data，和computed中的数据变化
<template>
<div>
<div>{{title}}</div>
<div>{{title02}}</div>
<div>{{titleCopy}}</div>
<div>{{title03}}</div>
</div>
</template>
<script>
export default {
name:'',
props:{
title:{
type:[String,Number],
default:"liuhao"
}
},
data(){
return {
titleCopy:this.title,
title03:"iii"
}
},
computed:{
title02:function(){
return this.titleCopy+"computed"
}
},
watch:{
title02:function(news){
this.title03 = news
},
title:function(news){
this.titleCopy = news
}
}
}
</script>
这样使用的时候容易造成死循环，所以在实际开发中，建议
1、watch中监听props中的数据或data中的数据，
2、computed中计算props或者data中的数据，
3、data中使用props中的数据进行拷贝，如需响应数据变化则在watch中监听props的变化，在赋值给data
4、不要直接赋值给computed的属性，如果需要赋值，computed需要定义get与set函数
网友评论