Vue3.0中怎么使用watch(vue,watch,开发技术)

watch在Vue3.0中并不是一个新的概念，在使用Vue2.x的时候，我们经常会使用watch来监听Vue实例上面的一个表达式或者一个函数计算结果的变化。

在 Vue2.0 中，我们使用watch可以通过下面多种方式去监听Vue实例上面的表达式或者函数计算结果的变化,如下罗列了其中的几种

最常规使用方式

我们可以在watch属性里面配置要监听的Vue实例上面的属性，也可以通过.键路径去监听对象中的某一个属性的变化，也可以通过配置immediate在监听后立即触发，配置deep去深度监听对象里面的属性，不论嵌套层级有多深。

使用$watch监听

除了常规的watch对象写法之外，Vue实例上面提供了$watch方法，可以通过$watch更灵活的去监听某一个属性的变化。比如这样一个场景，我们有一个表单，然后希望在用户修改表单之后可以监听到表单的数据变化。但是有一个特殊的场景，就是表单的回填数据是异步请求过来的，这时候我们希望在后台请求完数据之后再去监听变化，这时候就可以使用$watch。如下代码所示:

监听函数表达式

除了监听字符串之外，$watch的第一个参数也可以是一个函数，当函数的返回值发生变化之后，触发回调函数

上文中就是 Vue2.0 中我们使用watch的一些常用写法，对于Vue3.0，因为其对 Vue2.0 做了部分的向下兼容，所以上面的用法在Vue3.0中基本都可以使用，但是Vue3.0一个很大的亮点就是composition API,所以除了 Vue2.0 中的写法之外，也可以使用componsition api中提供的watch

在Vue3.0中，除了 Vue2.0 的写法之外，有两个api可以对数据变化进行监听，第一种是watch,第二种是watchEffect。对于watch,其与 Vue2.0 中的$watch用法基本是一模一样的，而watchEffect是Vue3.0新提供的api

下面的示例演示了如何使用watch

watch除了可以监听单个值或者函数返回值之外，也可以同时监听多个数据源，比如下面代码所示:

watchEffect的用法与watch有所不同，watchEffect会传入一个函数，然后立即执行这个函数，对于函数里面的响应式依赖会进行监听，然后当依赖发生变化时，会重新调用传入的函数，如下代码所示:

停止执行

Vue2.0 中的$watch会在调用的时候返回一个函数，执行这个函数可以停止watch，如下代码所示

在Vue3.0中，watch与watchEffect同样也会返回一个unwatch函数，用于取消执行，比如下面代码所示

清除副作用

想象一下这样的一个场景，界面上面有两个下拉框，第二个下拉框的数据是根据第一个下拉框的数据联动的，当第一个下拉框数据发生变化后，第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过watchEffect来实现这个功能，比如像下面代码这样

现在假如我切换了一下第一个下拉框的数据之后，这时候数据请求已经发出，然后我将这个页面切换到另一个页面，因为请求已经发出，所以我希望在页面离开的时候，可以结束这个请求，防止数据返回后出现异常，这时候就可以使用watchEffect为第一个回调函数传入的入参来处理这个情况，如下代码所示

想一想在 Vue2.0 中我们一般会用计算属性做什么操作呢？我想最常见的就是当模板中有一个复杂计算的时候，可以先使用计算属性进行计算，然后再在模板中使用，实际上，Vue3.0中的计算属性的作用和 Vue2.0 的作用基本是一样的。

在Vue2.0中使用计算属性

在Vue3.0中使用计算属性

和 Vue2.0 一样，Vue3.0的计算属性也可以设置getter和setter，比如上面代码中的计算属性，只设置了getter,即加入cumputed传入的参数是一个函数，那么这个就是getter,假如要设置setter,需要像下面这样去写

在 Vue2.0 中我们使用vue-router的时候，会通过new VueRouter的方式去实现一个VueRouter实例，就像下面代码这样

但到了Vue3.0,我们创建VueRouter的实例发生了一点点变化，就像Vue3.0在main.js中初始化Vue实例需要像下面写法一样

vue-router也修改为了这种函数的声明方式

然后在main.js中，通过

来引用到Vue中

在 Vue2.0 中，我们通过this.$route可以获取到当前的路由，然后通过this.$router来获取到路由实例来进行路由跳转，但是在setup中，我们是无法拿到this的，这也意味着我们不能像 Vue2.0 那样去使用vue-router, 此时就需要像下面这样去使用

上面代码我们使用watch来监听路由是否发生变化，除了watch之外，我们也可以使用vue-router提供的生命周期函数

除了onBeforeRouteUpdate之外，vue-router在路由离开的时候也提供了一个生命周期钩子函数

其实vuex在Vue3.0中的使用方式和vue-router基本是一致的

首先新建store/index.js,然后添加如下代码

然后在main.js中，通过以下方式使用

和useRouter一样，vuex也提供了useStore供调用时使用,比如下面这段代码

其余的使用方式基本和Vue2.0中的用法是一致的，大家具体可以参考vuex官方文档

在前文中，我们说到Vue3.0是兼容一部分 Vue2.0 的，所以对于 Vue2.0 的组件写法，生命周期钩子函数并未发生变化，但是假如你使用的是componsition api,那么就需要做一部分调整

取消beforeCreate与created

在使用componsition api的时候，其实setup就代替了beforeCreate与created,因为setup就是组件的实际入口函数。

beforeDestroy与destroyed 改名了

在setup中，beforeDestroy更名为onBeforeUnmount,destroyed更名为onUnmounted

将生命周期函数名称变为on+XXX，比如mounted变成了onMounted,updated变成了onUpdated

在setup中使用生命周期函数的方式

实际用法与 Vue2.0 基本是一致的，只是写法发生了变化，所以学习成本是很低的。