东莞网站制作有名 乐云践新,高中制作网站怎么做,常州网站建设设计,地方门户网站推广方法有那些最近#xff0c;写vue代码#xff0c;判断父组件传来的type来作为条件判断#xff0c;并用v-if v-else来控制页面展示。
起初用watch监听了type#xff0c;发现值改变了#xff0c;但是写在data配置项的visible属性书写错误#xff0c;未实现响应式#xff0c;如下写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}},
