Vue.js 中 watch 的高级用法

2023-11-20 05:24:15

Vue.js 中 watch 的高级用法：深度探索

简介

watch 选项是 Vue.js 中一个强大的工具，它允许开发者监听数据属性的变化并执行相应的函数。本指南将深入探讨 watch 的一些高级用法，例如深度侦听、计算属性、取值器和设值器，以及立即执行。

深度侦听

默认情况下，watch 会进行浅层侦听，这意味着它只会监听对象的顶层属性的变化。但是，如果需要监视对象的嵌套属性，则可以使用 deep 选项。

代码示例：

watch: {
  deepObject: {
    handler(newValue, oldValue) {
      // 在 deepObject 的任何嵌套属性更改时执行
    },
    deep: true
  }
}

计算属性

watch 也可以与计算属性一起使用。这允许开发者定义一个计算属性来派生一个值，并在该值发生变化时触发侦听器。

代码示例：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

watch: {
  fullName(newValue, oldValue) {
    // 在 fullName 计算属性发生变化时执行
  }
}

取值器和设值器

watch 还支持取值器和设值器函数。这允许开发者在侦听器执行之前或之后对属性值进行转换。

代码示例：

data() {
  return {
    formattedName: ''
  }
}

watch: {
  fullName: {
    handler(newValue, oldValue) {
      this.formattedName = newValue.toUpperCase();
    },
    immediate: true // 立即执行侦听器
  }
}

立即执行

immediate 选项允许开发者在组件首次渲染时立即执行侦听器。这对于需要在组件加载时初始化某些操作的情况很有用。

实例

下面是一些使用 watch 的高级用法的实例：

监视嵌套对象中的数组变化：

watch: {
  'deepObject.array': {
    handler(newValue, oldValue) {
      // 在 deepObject.array 数组中的项目发生变化时执行
    },
    deep: true
  }
}

使用计算属性监听对象更改：

computed: {
  isEven() {
    return this.number % 2 === 0;
  }
}

watch: {
  isEven(newValue, oldValue) {
    // 在 isEven 计算属性发生变化时执行
  }
}

使用取值器和设值器转换属性值：

data() {
  return {
    formattedDate: ''
  }
}

watch: {
  date: {
    handler(newValue, oldValue) {
      this.formattedDate = moment(newValue).format('YYYY-MM-DD');
    },
    immediate: true
  }
}