Vue中watch与计算属性computed

最近，写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，即只监听对象的引用变化而不监听内部属性的变化。

1. 监听对象或数组的变化： 默认情况下，Vue.js的watch选项只能监听数据的引用变化，而无法深度监听对象或数组内部属性的变化。如果要监听对象或数组内部属性的变化，需要将deep属性设置为true。

2. 立即触发监听函数： 通过设置immediate属性为true，可以在组件初始化时立即触发监听函数，而不必等到数据变化后再执行监听函数。

3. 监听多个数据： watch选项还可以监听多个数据，可以将多个数据以对象的形式传入，并为每个数据设置对应的监听函数。

4. 监听函数的执行： 监听函数在数据发生变化时被调用，可以在函数内部执行任何操作，如更新其他数据、发送网络请求等。

总之，watch选项提供了一种便捷的方式来监控数据的变化，并在数据变化时执行相应的操作，是Vue.js中非常常用的选项之一。

computed计算属性

在Vue.js中，computed 是一种特殊的属性，用于声明一个计算属性。计算属性的值是基于其他响应式数据的值计算而来的，并且具有缓存机制，只有依赖的响应式数据发生变化时，才会重新计算计算属性的值。以下是对computed的详细解释：

computed: {// 计算属性的名称computedProperty() {// 计算属性的计算逻辑return this.data1 + this.data2;}
}

在computed选项中，可以声明一个计算属性，以键值对的形式进行声明。计算属性的键就是属性的名称，值是一个函数，用于计算属性的值。计算属性的值可以是对其他响应式数据的计算，也可以是对其他计算属性的引用。

1. 计算属性的特点：

   • 响应式：计算属性是响应式的，当依赖的响应式数据发生变化时，计算属性的值会自动更新。
   • 缓存：计算属性具有缓存机制，只有当依赖的响应式数据发生变化时，才会重新计算计算属性的值。如果依赖的响应式数据没有发生变化，则计算属性会返回之前缓存的值，避免不必要的重复计算。

2. 计算属性与方法的区别： 虽然计算属性和方法都可以用于根据其他数据的值计算出新的数据，但它们之间有一些区别：

   • 缓存：计算属性具有缓存机制，而方法每次调用都会重新执行计算逻辑。
   • 调用方式：计算属性像是数据属性一样被访问，而方法需要通过方法调用的方式来使用。
   • 响应式：计算属性是响应式的，而方法不是，方法的返回值不会随依赖数据的变化而变化。

3. 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'}},