Vue3监听数据变化，以及composition Api

• Vue2中的数据监听

• watch选项
• $watch方法

• Vue3中的数据监听

• watch函数

• watch为什么只是Proxy的附属品
• Options API 和 Composition API
  

Vue2中的数据监听

在Vue2中，可以使用watch选项或$watch方法来监听数据变化。

watch选项

在Vue2的组件选项中，有一个watch选项，用来监听数据的变化。具体的语法如下：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`count值从${oldValue}变为${newValue}`)
    }
  }
}

在上面的代码中，我们在组件选项中定义了一个watch选项，用来监听count的变化。当count的值发生变化时，会执行回调函数，并将变化前的值和变化后的值作为参数传入回调函数中。

$watch方法

在Vue2中，还可以使用$watch方法来监听数据变化。具体的语法如下：

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.$watch('count', (newValue, oldValue) => {
      console.log(`count值从${oldValue}变为${newValue}`)
    })
  }
}

在上面的代码中，我们在组件的mounted钩子函数中使用$watch方法来监听count的变化。当count的值发生变化时，会执行回调函数，并将变化前的值和变化后的值作为参数传入回调函数中。

Vue3中的数据监听

在Vue3中，可以使用watch函数来监听数据变化。

watch函数

在Vue3中，可以使用watch函数来监听数据变化。具体的语法如下：

import { watch, ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
      console.log(`count值从${oldValue}变为${newValue}`)
    })
    return {
      count
    }
  }
}

在上面的代码中，我们使用watch函数来监听count的变化。当count的值发生变化时，会执行回调函数，并将变化前的值和变化后的值作为参数传入回调函数中。

watch为什么只是Proxy的附属品

在Vue3中，使用watch监听数据变化时，会自动创建一个响应式对象，并使用Proxy来监听该对象的变化。实际上，Vue3中的响应式系统是基于Proxy实现的，而watch函数只是响应式系统的一个附属品，用来监听数据变化并执行相应的回调函数，可以理解为是对Proxy的封装。

与Vue2中的数据监听方式不同，Vue3中的watch函数可以监听任何响应式数据的变化，包括响应式对象、响应式数组、计算属性等。这就使得Vue3中的数据监听更加灵活和方便，可以根据实际情况选择不同的监听方式。

总的来说，Vue3中的数据监听方式更加灵活和方便，使用watch函数可以监听任何响应式数据的变化，并执行相应的回调函数。watch函数只是Vue3响应式系统的一个附属品，用来封装Proxy的功能，使得数据监听更加方便和高效。

Options API 和 Composition API

Options API是Vue2中使用的API风格，它是一种基于选项的API，即我们在Vue实例中定义一些选项，例如data、methods、computed、watch等等。Options API的优点是易于理解和使用，但是当组件逻辑变得复杂时，代码结构会变得混乱不易于维护。

Composition API是Vue3中新增的API风格，它基于函数的API，即我们可以将组件的逻辑拆分成多个函数，每个函数只关注特定的功能，然后再将这些函数组合成一个组件。Composition API的优点是可以更好地组织代码，易于复用和测试，并且可以更好地支持TypeScript。

Composition API提供了一些常用的函数，例如reactive、ref、computed、watchEffect等等，可以帮助我们更方便地管理组件的状态和行为。

下面是一些常用的Composition API函数：

reactive：将一个普通对象转换成响应式对象

ref：将一个普通变量转换成响应式变量

computed：创建一个计算属性

watchEffect：创建一个响应式副作用

watch：创建一个响应式的侦听器

onMounted：在组件挂载时执行的函数

onUpdated：在组件更新时执行的函数

onUnmounted：在组件卸载时执行的函数

总之，Composition API是Vue3中的一个重要特性，可以帮助我们更好地组织代码，提高代码的可读性和可维护性。

⭐⭐以reactive函数为例，它的语法如下：

import { reactive } from 'vue'
const state = reactive({
  count: 0
})

这个函数接受一个普通的JavaScript对象作为参数，并返回一个响应式的对象。我们可以通过访问state.count属性来获取或设置它的值，当属性的值发生改变时，相关的组件将会自动更新。

⭐⭐另一个常用的函数是ref，它的语法如下：

import { ref } from 'vue'
const count = ref(0)

这个函数接受一个普通的JavaScript值作为参数，并返回一个响应式的变量。我们可以通过访问count.value属性来获取或设置它的值，当变量的值发生改变时，相关的组件将会自动更新。

浅浅的列举两个例子，其他的用法可以参考官方文档，传送门：官方文档