watcheffect vue2

watchEffect 是 Vue 3 中新增的 API，用于监听响应式数据的变化并执行相应的副作用函数。而在 Vue 2 中，我们可以使用 watch 来实现类似的功能。

watchEffect 的使用方法如下：

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(state.count)
})

上述代码中，我们使用 reactive 创建了一个响应式对象 state，并使用 watchEffect 监听了 state.count 的变化。当 state.count 发生变化时，会自动执行回调函数并输出 count 的值。

相关问题

vue watchEffect

Vue的watchEffect是Vue 3中引入的一个新特性，它用于监视响应式数据的变化并执行相应的副作用函数。watchEffect函数接收一个副作用函数作为参数，并在副作用函数中访问响应式数据。当响应式数据发生变化时，副作用函数会被重新执行。

watchEffect的使用方式非常简单，只需要在组件中调用watchEffect函数，并传入一个副作用函数即可。副作用函数可以访问组件中的响应式数据，当这些数据发生变化时，副作用函数会被重新执行。

下面是一个使用watchEffect的示例：

import { watchEffect, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    watchEffect(() => {
      console.log('count changed:', state.count);
    });

    return {
      state,
    };
  },
};

在上面的示例中，我们创建了一个响应式对象state，并在watchEffect中定义了一个副作用函数。当state.count发生变化时，副作用函数会被重新执行，并打印出新的count值。

vue watcheffect

Vue's `watchEffect` is a reactive function that watches for changes in reactive properties and executes a callback function when a change occurs. It is similar to Vue's `computed` property, but instead of returning a value, it directly executes a function.

The `watchEffect` function takes in a callback function that contains the reactive properties that you want to watch. When any of these properties change, the callback function is executed. Vue automatically tracks all the reactive properties used in the callback function and only executes it when necessary.

Here's an example of using `watchEffect`:

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { watchEffect, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    const increment = () => {
      state.count++
    }

    watchEffect(() => {
      console.log(`Count has changed to ${state.count}`)
    })

    return {
      count: state.count,
      increment
    }
  }
}
</script>

In this example, we're using `watchEffect` to log a message to the console whenever the `count` property changes. We're also using Vue's `reactive` function to create a reactive state object that contains the `count` property. When the `increment` function is called, it increases the `count` property, which triggers the `watchEffect` callback function.

Note that we're returning the `count` and `increment` variables from the `setup` function so that they can be used in the template. Vue's `reactive` function and `watchEffect` are part of the Composition API, which is a new way of writing Vue components introduced in Vue 3.