Vue.js 中利用 watch 监听数据变化的方案详解-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 的开发中，我们常常需要监听数据变化来实现一些特定的逻辑或者视图的更新。Vue.js 提供了众多的监听方式，其中 watch 监听是一种比较常用的方式。本文将详细介绍 Vue.js 中利用 watch 监听数据变化的方案，帮助读者深入理解该特性，并提供实际的示例代码以供参考。

一、watch 的基本用法

watch 属性是在 Vue.js 实例中定义的一个对象，用于监听数据变化。我们可以在 watch 对象中定义需要监听的数据属性以及该属性变化后需要执行的操作。例如，我们可以定义一个名为 message 的数据属性，如下所示：

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      message: 'Hello Vue!',
    }
  },
  watch: {
    message (newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`)
    }
  }
}

在上述代码中，我们通过定义 watch 对象来监听数据 message 的变化。当 message 属性的值发生变化时，会触发 watch 中定义的函数，并传递新值和旧值两个参数。在函数中，我们可以按照自己的需求处理这两个参数，并实现相应的业务逻辑。

需要注意的是，watch 的触发是在数据变化之后同步执行的。如果需要在数据变化之前执行特定的操作，可以使用 computed 属性或者 methods 方法。

二、watch 的深度监听

在 Vue.js 的开发中，有时候我们需要监听嵌套对象或者数组的变化。由于 Vue.js 在监听对象和数组的变化时并不会监听到每个属性的变化，而是只监听到整个对象或者数组的引用变化，因此我们需要利用深度监听来实现具体的业务需求。

在 watch 中，我们可以通过设置深度监听来监听嵌套对象或者数组的变化。需要注意的是，深度监听会对性能产生一定的影响，因此应该在必要的情况下使用。

例如，我们可以监听一个名为 person 的嵌套对象：

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      person: {
        name: '张三',
        age: 18,
      }
    }
  },
  watch: {
    person: {
      handler (newVal, oldVal) {
        console.log(`person changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`)
      },
      deep: true,
    }
  }
}

在上述代码中，我们定义了一个名为 person 的嵌套对象，并通过设置 deep = true 来实现深度监听。当 person 中的任何一个属性发生变化时，都会触发 watch 中定义的函数，并传递新值和旧值两个参数。

同样地，我们可以通过设置 deep = true 来监听一个名为 list 的数组：

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      list: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
      ]
    }
  },
  watch: {
    list: {
      handler (newVal, oldVal) {
        console.log(`list changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`)
      },
      deep: true,
    }
  }
}

在上述代码中，我们定义了一个名为 list 的数组，并通过设置 deep = true 来实现深度监听。当 list 中的任何一个元素或者数组的引用发生变化时，都会触发 watch 中定义的函数，并传递新值和旧值两个参数。

三、watch 的立即执行

在 Vue.js 的开发中，有时候我们需要在数据变化之后立即执行相应的操作，而不是等到下一次事件循环执行才触发 watch 函数。Vue.js 允许我们通过设置 immediate = true 来实现该需求。

例如，我们可以定义一个名为 message 的数据属性，并将 immediate = true 用于对其的监听函数：

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      message: 'Hello Vue!',
    }
  },
  watch: {
    message: {
      handler (newVal, oldVal) {
        console.log(`message changed from ${oldVal} to ${newVal}`)
      },
      immediate: true,
    }
  }
}

在上述代码中，我们定义了一个名为 message 的数据属性，并设置 immediate = true 来实现监听函数的立即执行。当 message 属性的值在初始化之后发生变化时，会立即触发 watch 中定义的函数，并传递新值和旧值两个参数。

需要注意的是，只有在 immediate = true 的情况下，watch 函数才会在 Vue.js 实例的初始化过程中立即执行。在其他情况下，watch 函数会等到下一次事件循环才执行。

四、watch 与计算属性的区别

在 Vue.js 的开发中，除了使用 watch 监听数据变化，我们还可以使用计算属性来实现相应的需求。那么，watch 与计算属性有何区别呢？

在实现相同的需求时，watch 和计算属性的最终结果是相同的，但是它们的实现方式和适用场景是不同的。

一方面，watch 是一种被动监听的方式，只有在数据变化之后才会执行相应的函数。而计算属性是一种主动计算的方式，只有在需要时才会计算结果。

另一方面，由于 Vue.js 的响应式系统采用的是基于依赖追踪的计算属性计算策略，因此当数据不变时，计算属性可以重复利用已经计算得到的结果，而不需要重新计算。而 watch 函数则需要重新执行整个处理函数，无法复用之前的结果。因此，在需要频繁监听数据变化的场景中，使用 watch 函数会对性能产生较大的影响，而计算属性则可以较为优雅地解决这个问题。

在选择使用哪种方式时，应该根据具体的业务需求和场景进行选择，并结合自己的经验和判断来决定。

五、示例代码

本文提供了一些示例代码，以帮助读者更好地理解 watch 监听在 Vue.js 中的具体应用和实现。

监听一个普通属性的变化

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      message: 'Hello Vue!',
    }
  },
  watch: {
    message (newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`)
    }
  }
}

监听一个嵌套对象的变化

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      person: {
        name: '张三',
        age: 18,
      }
    }
  },
  watch: {
    person: {
      handler (newVal, oldVal) {
        console.log(`person changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`)
      },
      deep: true,
    }
  }
}

监听一个数组的变化

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      list: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
      ]
    }
  },
  watch: {
    list: {
      handler (newVal, oldVal) {
        console.log(`list changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`)
      },
      deep: true,
    }
  }
}

监听一个属性的变化并实现立即执行

// javascriptcn.com 代码示例
export default {
  data () {
    return {
      message: 'Hello Vue!',
    }
  },
  watch: {
    message: {
      handler (newVal, oldVal) {
        console.log(`message changed from ${oldVal} to ${newVal}`)
      },
      immediate: true,
    }
  }
}

六、总结

本文详细介绍了 Vue.js 中利用 watch 监听数据变化的方案，包括基本用法、深度监听、立即执行以及与计算属性的区别。通过实际的示例代码，读者可以更好地理解 watch 监听在 Vue.js 中的应用和实现方法，进一步加深对 Vue.js 的理解和应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651feff795b1f8cacd77a18d