Vue3监听数据变化，以及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属性来获取或设置它的值，当变量的值发生改变时，相关的组件将会自动更新。
浅浅的列举两个例子，其他的用法可以参考官方文档，传送门：官方文档
