(尚硅谷)Vue笔记--------32

watch监视ref定义的数据

先写一个简单的例子：

 

我们现在使用一下watch属性：

 

 

我们可以使用watch的完整写法，可以使用一些属性和方法：

 

可以看到我们可以使用一开始就先开启监听，或者也可以开启深度监听。

这些都是我们vue2中的监听写法，现在我们来学习一下vue3中的监听写法：
 

 

我们是监视了ref的1个属性。现在我们来看看监视ref的多个属性应该怎么做呢？

我们可以针对每一个属性写一个监视配置项，但是比较麻烦，我们vue3也给出了推荐的写法：

 

 

watch监视reactive定义的数据 

我们去添加一个reactive定义的数据：

 

 

 

 

 

我们发现，我们的newValue是正常的，但是我们的oldValue是不好的，它不是原来的数值而是和更改后的是一样的。

这是因为监视reactive所定义的一个响应式数据，此处无法正确的获取oldValue。

我们目前是没有办法解决这个问题的。

并且这种方式还有一个问题：

 

我们加了一个这种嵌套对象的属性。

 

 

 

 

这里体现出了2个问题：

我们这里默认强制开启了深度监视，并且无法使用deep配置项去更改。

我们还有一个情况是我们只监视reactive定义的数据中的某一个：

 

 

这个还是挺麻烦的，要改成函数形式。

还有一种情况，我们要监视reactive定义的某些数据，不是单一的一个，也不是全部：

 

 

还有一种特殊情况就是我们去更改job中的salary属性：
 

 

 

我们涨薪了，但是没有监视到，但是监视reactive中的某一个属性，之前确实是这么写的啊，这里就是一个特殊情况，因为这个job属性是一个嵌套的对象,里面其中一个属性salary埋的太深，所以这个时候我们要开始deep深度监视。

 

 

watch时value的问题 

 

 

我们现在所有的属性都是用ref去修饰的。我们可不可以用.value获取属性值呢？

 

 

这是报错的，不可以的，我们的ref定义的属性是一个ref类，不能直接通过.value去监视。

但是我们同样的ref定义的person却可以：
 

 

我们如果用ref去定义了一个类对象数据的话，是不可以的。

我们有两种方式去解决这个问题：

1.是这种情况可以使用.value方法：

 

 

第二种解决方法是我们用深度监视的方法：

 

 

watchEffect函数 

 

 

我们之前一直是使用的watch监视，我们现在来使用一下watchEffect来对比一下：

 

 

 我们发现它一开始就执行了监视功能，但是我们点击任何按钮都没有再触发监视效果。

它这个函数的含义是我们使用到什么就监视到什么，现在我们什么属性也没监视到，肯定就什么也不会起作用呗。

 

 

 

Vue3的生命周期 

 

 

 

 

为了更好的去做这个卸载的功能，我们去更改一下我们的app.vue:

 

 

 

 

 

但是在官方的图中，我们这些生命周期是写在setup里的，我们先把这种形式的先注释掉：

 

 

我们现在要想办法去写在API里：

 

我们去看这个表就可以了。

 

 

 

 

如果这种在setup中的生命周期钩子和我们之前那种用配置项写的方法同时使用的话，setup中的优先级要高于配置项写法。