拥抱Vue3 (四) 计算属性与侦听属性

 在Vue3中computed计算属性被抽离出去了，要用的时候按需引入，然后作为函数调用。基本的使用方法和Vue2相同，唯一不同的就是需要自己引入这一点。watch也是一样，注重了函数式编程与按需引入的特色，个人感觉逐React化，和useEffect有些类似。 

 

 

 

 在情况一中你可能会问，在监视sum的时候为什么不是sum.value，在前面的专栏文章中介绍的是，通过数据.value才能拿到他所对应的值。

事实上，Vue3中监视的是一个结构而不是属性的值。

在写情况三之前，我们可以先用 ref 监视一下对象看看是否需要添加.value 。如果使用ref监视对象数据，在控制台中我们看到的是一个proxy对象。而如果说只是改变对象中的某个属性值，这样的修改并不会改变对象的地址值，Vue也就检测不到元素数据的变化。

 因此，我们在监视对象数据类型的时候，要么监视对象.value，要么在ref包装对象时采用深度监视person，要么用reactive去包装对象。不过需要注意的是，通过ref包装对象的时候无法获取oldValue，deep配置也失效了。

 这个情况四是我最不理解的新写法，即使文档中也是这么用的。使用reactive监视的对象中的元素，需要通过一个函数返回这个元素后再使用。并且通过函数返回，被监视对象的某个基本数据类型数据，是有oldValue的。现在是3.1.x的版本，后续版本应该会优化。

 这里又是一个坑。在情况三中我们说到，reactive对person开启了监视后对person使用deep是无效的，即使是deep:false强制false也是没有作用的。但是在这里又需要配置deep，因为job对象是person中嵌套的对象元素，所以配置有效。

 3.wachEffect

Vue3增加了一个新的api，watchEffect。

这个函数一上来就可以执行，虽然这个函数并非像watch一样声明了自己要监视谁，但是他可以直接监视，在自己的函数作用域中所出现过的所有变量。只要是它所依赖的数据/对象属性值发生了改变，就会触发函数里的所有方法。