Vue--》vue3中的计算属性与监视的使用讲解

computed函数

与Vue2.x中的computed配置功能一致，只不过在Vue3.x中我们需要按需导入该函数。因为Vue3.x是向下兼容Vue2语法的，所以我们可以写成既有 setup 又有 Vue2中的computed函数，如下代码示例：

这种既有Vue2又有Vue3的语法显然是不合适的，从开发者工具我们也看出来，setup和computed并列。如下图所示：

在Vue3的做法是将计算属性按需导入，在setup内部进行使用，如下：

watch函数

在Vue3中watch监听ref定义的数据，在按需导入watch后，watch函数能接收三个参数：第一个参数是监视对象；第二个参数是监视的回调函数；第三个是监视的配置属性。如下：

当监视reactive所定义的一个响应式数据的全部属性时，是无法正确的获取到oldValue的，默认是强制开启了深度监听，所以即使你把深度监听关掉也是不奏效的，如下：

如果想监视reactive所定义的一个响应式数据中的某个或某些属性，可以通过如下方式进行：

如果想拿到reactive函数中深层次的属性，即reactive函数中某个对象的属性，这时候就需要借助深度监视 deep 了，而且deep有效，如下：

虽然我们监听到了值的变化，但是还是拿不到旧值，所以说白了，对于Vue3中的watch函数来说，在对象中是拿不到旧值的。如下：

watcrEffect函数

watch的套路是:既要指明监视的属性，也要指明监视的回调；watchEffect的套路是:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed :
但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值。
watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值。