最近,写vue代码,判断父组件传来的type来作为条件判断,并用v-if v-else来控制页面展示。
起初用watch监听了type,发现值改变了,但是写在data配置项的visible属性书写错误,未实现响应式,如下:(这导致即使type改变了[数据改变了未驱动视图的改变])
props: {businessObject: Object,type: String,idEditDisabled: {type: Boolean,default: true}},data() {return {elementBaseInfo: {},methodOptions: [],visible:false//典型的没有响应式// visible: this.type === 'StartEvent' || this.type === 'EndEvent'||this.type === 'Process'}},
问题与此博客类似:VUE中用props+计算属性/侦听器实现子组件监听父组件数据的变化_在子组件的计算属性监听props中的属性-CSDN博客
VUE中用props子组件监听父组件数据的变化
在不使用vuex的情况下,如何监听呢?
- 一开始想的是在子组件里的data中重定义props中接收的数据,再通过methods中定义的方法来监听,发现不可行,data里重定义的数据并不会随着父组件传过来的数据的变化而变化
- 后来用计算属性来监听data里重定义的数据,发现也不可以,于是放弃data的重定义。
- 发现计算属性和侦听器都可以直接监听props里的属性
后面了解到用侦听器watch和计算属性computed解决了(其实大概也知道是这个原因,目前对响应式了解的仍然不够深透,等下再去了解一下哈)
watch侦听器
使用
watch
监听数据的主要原因是当数据发生变化时,能够触发相应的操作或逻辑。在 Vue.js 中,watch
是一种用来监测数据变化并执行相应处理逻辑的方法。使用watch
可以监听指定的数据变化,并在数据变化时执行watch: {// 监听数据的名称dataToWatch: {// 监听函数,当数据发生变化时执行handler(newValue, oldValue) {// 执行操作,newValue为新值,oldValue为旧值},// 是否立即触发监听函数,默认为false,即在数据变化之后才会执行监听函数immediate: true,// 深度监听对象内部属性的变化,默认为falsedeep: true} }
在
watch
选项中,dataToWatch
是要监听的数据的名称,可以是响应式数据的任何属性,如data
中的属性或props
中传入的属性。handler
是监听函数,当dataToWatch
的值发生变化时被调用,参数newValue
表示变化后的新值,oldValue
表示变化前的旧值。immediate
属性表示是否在初始化时立即执行监听函数,默认为false,即在数据变化之后才会执行监听函数。deep
属性表示是否深度监听对象内部属性的变化,默认为false,即只监听对象的引用变化而不监听内部属性的变化。
监听对象或数组的变化: 默认情况下,Vue.js的
watch
选项只能监听数据的引用变化,而无法深度监听对象或数组内部属性的变化。如果要监听对象或数组内部属性的变化,需要将deep
属性设置为true。立即触发监听函数: 通过设置
immediate
属性为true,可以在组件初始化时立即触发监听函数,而不必等到数据变化后再执行监听函数。监听多个数据:
watch
选项还可以监听多个数据,可以将多个数据以对象的形式传入,并为每个数据设置对应的监听函数。监听函数的执行: 监听函数在数据发生变化时被调用,可以在函数内部执行任何操作,如更新其他数据、发送网络请求等。
总之,
watch
选项提供了一种便捷的方式来监控数据的变化,并在数据变化时执行相应的操作,是Vue.js中非常常用的选项之一。
computed计算属性
在Vue.js中,
computed
是一种特殊的属性,用于声明一个计算属性。计算属性的值是基于其他响应式数据的值计算而来的,并且具有缓存机制,只有依赖的响应式数据发生变化时,才会重新计算计算属性的值。以下是对computed
的详细解释:computed: {// 计算属性的名称computedProperty() {// 计算属性的计算逻辑return this.data1 + this.data2;} }
在
computed
选项中,可以声明一个计算属性,以键值对的形式进行声明。计算属性的键就是属性的名称,值是一个函数,用于计算属性的值。计算属性的值可以是对其他响应式数据的计算,也可以是对其他计算属性的引用。
计算属性的特点:
- 响应式:计算属性是响应式的,当依赖的响应式数据发生变化时,计算属性的值会自动更新。
- 缓存:计算属性具有缓存机制,只有当依赖的响应式数据发生变化时,才会重新计算计算属性的值。如果依赖的响应式数据没有发生变化,则计算属性会返回之前缓存的值,避免不必要的重复计算。
计算属性与方法的区别: 虽然计算属性和方法都可以用于根据其他数据的值计算出新的数据,但它们之间有一些区别:
- 缓存:计算属性具有缓存机制,而方法每次调用都会重新执行计算逻辑。
- 调用方式:计算属性像是数据属性一样被访问,而方法需要通过方法调用的方式来使用。
- 响应式:计算属性是响应式的,而方法不是,方法的返回值不会随依赖数据的变化而变化。
getter 和 setter: 计算属性可以使用 getter 和 setter 函数来自定义计算逻辑和处理属性的赋值操作。getter 函数用于获取计算属性的值,setter 函数用于处理计算属性的赋值操作。
computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {const parts = newValue.split(' ');this.firstName = parts[0];this.lastName = parts[1];}} }
总之,
computed
选项提供了一种便捷的方式来声明计算属性,用于根据其他响应式数据的值计算出新的数据,并且具有缓存机制和响应式特性,是 Vue.js 中非常常用的选项之一。
最上面问题可以监听器或计算属性完成
// // watch配置项实现// type(newVal, oldVal){// this.visible = newVal === 'StartEvent' || newVal === 'EndEvent'||newVal === 'Process'// }},computed:{computeVisible(){return this.type === 'StartEvent' || this.type === 'EndEvent'||this.type === 'Process'}},