响应式编程：Vue3 Computed 和 Watch 深入理解

2023-10-29 06:11:42

什么是响应式编程？

响应式编程是一种允许我们以声明式的方式去适应变化的编程范例。当一个值依附另一个值进行计算时, 如果前一个值发生了变化, 依附的那个也会同时进行变更. 典型案例参见 excel 函数. 当单个单元格的值发生变化时, 所有依赖它的单元格都会随之更新.

Vue3 中的响应式编程

Vue3 中的响应式编程是基于一个称为“响应式系统”的核心特性。这个系统可以自动追踪数据变化，并在数据发生变化时更新相关的视图。这意味着您不必手动编写代码来更新视图，这大大简化了开发过程。

Computed 和 Watch API

Computed 和 Watch API 是 Vue3 中用于响应式编程的两个主要工具。

Computed API

Computed API 允许您创建计算属性。计算属性是根据其他响应式属性计算而来的属性。当这些其他属性发生变化时，计算属性也会随之更新。

const vm = new Vue({
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
})

vm.count++ // doubleCount 自动更新为 2

Watch API

Watch API 允许您监听响应式属性的变化。当您监听的属性发生变化时，您可以在回调函数中执行某些操作。

const vm = new Vue({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    }
  }
})

vm.count++ // 控制台输出：count changed from 0 to 1