发挥Vue3.0潜力：深度剖析setup之监视与计算属性

前端

2024-01-22 13:13:21

Vue3.0中setup函数的监视器和计算属性

在Vue.js 3.0中，setup函数是一个全新的概念，它将组件的初始化逻辑与模板渲染逻辑分离，极大地提高了代码的可读性和可维护性。除了提供更简洁的语法，setup函数还引入了两个强大的特性：监视器和计算属性。

监视器

监视器用于监视数据的变化，当被监视的数据发生改变时，监视器会自动触发相应的处理函数。在setup函数中使用监视器，可以实现以下功能：

检测组件属性的变化
响应用户交互，例如输入框输入内容或按钮点击
监视外部数据的变化，例如通过AJAX请求获取的数据

使用监视器时，需要注意以下几点：

监视器只会在组件内部触发，不会影响其他组件。
监视器可以监视任何类型的数据，包括基本类型（如字符串、数字、布尔值）和引用类型（如数组、对象）。
监视器可以接受一个或多个参数，第一个参数是需要监视的数据，后面的参数是处理函数。

计算属性

计算属性是根据其他数据计算而得的属性。在setup函数中使用计算属性，可以实现以下功能：

将复杂的数据计算逻辑封装成独立的属性，提高代码的可读性和可维护性。
提高性能，因为计算属性只会重新计算被其依赖的数据发生改变时。

使用计算属性时，需要注意以下几点：

计算属性只能在setup函数中定义，不能在其他地方使用。
计算属性不能直接修改，只能通过修改其依赖的数据来更新。
计算属性可以接受一个或多个参数，第一个参数是需要计算的数据，后面的参数是计算函数。

实例

以下代码展示了如何在Vue.js 3.0的setup函数中使用监视器和计算属性：

import { ref, watch, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 监视count的变化，当count发生改变时，触发处理函数
    watch(count, (newValue, oldValue) => {
      console.log('count has changed from ${oldValue} to ${newValue}')
    })

    // 计算count的平方值
    const squaredCount = computed(() => {
      return count.value * count.value
    })

    return {
      count,
      squaredCount
    }
  }
}