Vue3 学习笔记之 watchEffect，带你轻松入门响应式编程

2023-09-03 18:59:31

深入浅出，理解 watchEffect 的工作原理

在 Vue3 中，watchEffect 是一个强大的工具，它允许我们监视响应式对象的变化，并在变化发生时执行某些操作。要理解 watchEffect 的工作原理，我们需要首先了解 Vue3 中的响应式系统。

Vue3 的响应式系统基于 Proxy 对象，它可以将普通对象转换成响应式对象。响应式对象的特点是，当它的属性发生变化时，Vue3 能够自动检测到这些变化并做出相应的反应。

watchEffect 就是利用了 Vue3 的响应式系统来实现的。当我们创建一个 watchEffect 时，我们就告诉 Vue3 我们想要监视某个响应式对象的某个属性。当这个属性发生变化时，Vue3 就会触发 watchEffect，执行我们指定的回调函数。

watchEffect 的使用指南，助你轻松构建响应式应用

watchEffect 的使用非常简单，只需要三步：

创建一个响应式对象。
使用 watchEffect 函数监视这个响应式对象。
在回调函数中执行想要执行的操作。

举个例子，我们想要创建一个简单的计数器，当用户点击按钮时，计数器的值就会增加。我们可以使用 watchEffect 来实现这个功能：

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

app.mount('#app')

const button = document.getElementById('button')

watchEffect(() => {
  console.log(`The current count is ${app.count}`)
})

button.addEventListener('click', () => {
  app.increment()
})

在这个例子中，我们创建了一个响应式对象 app.count，并使用 watchEffect 函数监视这个对象。当 app.count 的值发生变化时，watchEffect 就会触发，执行回调函数，在控制台中输出当前的计数值。当用户点击按钮时，app.increment() 方法会被调用，app.count 的值会增加，watchEffect 就会被触发，控制台中就会输出新的计数值。