vue3 语法糖 watch

在Vue 3中，watch的使用方式与Vue 2中有所不同。Vue 3中的watch语法糖可以通过使用`watchEffect`函数来实现。`watchEffect`函数接收一个函数作为参数，该函数中包含需要监听的响应式数据，当响应式数据发生变化时，该函数会被重新执行。下面是一个使用`watchEffect`函数实现watch的例子：

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { watchEffect } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  setup() {
    watchEffect(() => {
      console.log(`count changed: ${this.count}`)
    })
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

在上面的例子中，我们使用了`watchEffect`函数来监听`count`的变化，并在控制台输出变化后的值。当点击按钮时，`count`的值会发生变化，`watchEffect`函数会被重新执行，输出变化后的值。

相关问题

vue3 setup语法糖 watch写法

Vue 3 的 `setup` 函数提供了一种新的编写组件的方式，其中 `watch` 的写法更为简洁直观。传统的 `watch` 在 `created` 或者 `beforeUpdate` 生命周期钩子中使用，但在 `setup` 中，你可以这样使用：

import { watch } from 'vue'

setup() {
  // 定义响应式的数据或计算属性
  const count = ref(0)

  // 使用 watch 来监听某个数据的变化并执行回调
  // 第一个参数是要监视的变量，第二个参数是更新函数
  // 如果你想监听的是两个或更多变量，可以传递一个数组
  // 如果需要在变化发生前得到旧值，可以传入第三个参数为 { immediate: true }
  watch(
    count,
    (newCount) => {
      console.log(`计数已更新为：`, newCount)
    },
    { deep: true } // 如果需要深度监听对象或数组
  )

  // 可以返回 render 函数或其他副作用
  return () => <div>{{ count }}</div>
}

vue3setup语法糖watch使用

在Vue 3中，`watch`的使用方式有所改变，不再像Vue 2中那样直接在选项对象中定义。相反，Vue 3引入了一个新的语法糖函数`setup`，我们可以在`setup`中使用`watch`。

下面是一个示例代码，展示了如何在Vue 3中使用`setup`和`watch`：

import { watch, reactive } from 'vue';

export default {
  setup() {
    // 创建一个响应式对象
    const state = reactive({
      count: 0
    });

    // 监听count属性的变化
    watch(() => state.count, (newValue, oldValue) => {
      console.log(`count 从 ${oldValue} 变为 ${newValue}`);
    });

    // 在模板中使用state对象
    return { state };
  }
}

在上面的示例中，我们首先使用`reactive`函数将一个普通对象转换为响应式对象。然后，在`setup`函数中使用`watch`函数来监听`state.count`属性的变化。当`count`发生变化时，回调函数将会被触发，并打印出新旧值。

最后，我们将`state`对象返回给模板，以便在模板中使用它。

这就是在Vue 3中使用`setup`和`watch`的基本用法。希望对你有所帮助！如有疑问，请随时提问。