笔记大全

Vue3中的计算属性及侦听器如何使用

更新时间：2023-11-28

什么是计算属性？

计算属性是一种能够监测数据变化并且缓存计算结果的属性。当一个计算属性所依赖的数据发生变化时，它会重新执行计算并缓存结果，直到其中一个依赖项再次发生变化。

    // 示例代码
    export default {
      data(){
        return {
          firstName: 'John',
          lastName: 'Doe'
        }
      },
      computed: {
        fullName() {
          return `${this.firstName} ${this.lastName}`
        }
      }
    }

计算属性何时使用？

当需要对一些属性做特殊处理、计算，或者根据一些数据的状态决定渲染的内容时，就可以使用计算属性。多个组件都需要使用同一计算规则的话，需要使用混入，才能让代码尽量不重复。

    // 示例代码
    const numberList = [1, 2, 3, 4, 5]
    export default {
      data(){
        return {
          filter: undefined
        }
      },
      computed: {
        evenNumbersCount() {
          return this.numberList.filter(number => number % 2 === 0).length
        },
        filteredNumbers() {
          if (!this.filter) {
            return this.numberList
          }
          return this.numberList.filter(number => number.toString().startsWith(this.filter))
        }
      },
      methods: {
        filterChanged() {
          this.filter = this.$refs.filterInput.value
        }
      }
    }

什么是侦听器？

侦听器是一种能够监听数据变化并执行回调函数的方法。当数据变化时，自动触发该方法。侦听器的二个参数是新值和旧值。

    // 示例代码
    export default {
      data() {
        return {
          firstName: 'John',
          lastName: 'Doe'
        }
      },
      watch: {
        firstName(newName, oldName) {
          console.log(`firstName changed from ${oldName} to ${newName}`)
        }
      }
    }

侦听器何时使用？

当需要监听一些数据的变化，比如说逻辑计算、异步请求等，我们就可以使用侦听器。多个侦听器需要使用混入，同样的侦听器在多个组件里的回调函数必须一致（不然就炸了）。

    // 示例代码
    export default {
      data() {
        return {
          filter: undefined,
          numberList: [1, 2, 3, 4, 5]
        }
      },
      computed: {
        evenNumbersCount() {
          return this.numberList.filter(number => number % 2 === 0).length
        },
        filteredNumbers() {
          if (!this.filter) {
            return this.numberList
          }
          return this.numberList.filter(number => number.toString().startsWith(this.filter))
        }
      },
      watch: {
        filteredNumbers(newValue, oldValue) {
          console.log(`filteredNumbers changed from ${oldValue} to ${newValue}`)
        },
        evenNumbersCount(newValue, oldValue) {
          console.log(`evenNumbersCount changed from ${oldValue} to ${newValue}`)
        }
      },
      methods: {
        filterChanged() {
          this.filter = this.$refs.filterInput.value
        }
      }
    }

综上所述，计算属性和侦听器很大程度上方便了我们开发之路。它们都是与数据打交道的，计算属性解决了我们频繁计算需要缓存的问题，而侦听器监听数据变化已经是我们所期望的。所以熟练掌握计算属性和侦听器对于编写高效的Vue3应用是必须的。

c语言编程笔录