Vue3计算属性和监听器的用法

computed计算属性

计算属性指的是将Vue3的响应式数据，经过某种算法计算以后返回的一个值，这个值可以直接用于模板渲染。比如，我们经常在网页中渲染金额，如果金额过大的化，会导致内容很长。比如10000000表示1000万，我们可以将这个金额转换为1000w来进行表示。在使用计算属性的过程中，需要注意，尽量不要在异步方法中使用计算属性，尽量不要修改计算属性的值。

示例：计算金额。

watch监听器

watch监听器的作用是监听一个或者多个数据的变化，数据变化时执行回调函数。watch方法有两个额外参数，immediate表示立即执行，deep表示深度监听。

示例：监听单个值的变化。在这个案例中，我们定义了两个响应式变量msg和count，count可以通过两个按钮的点击分别增加和减少，msg的值会根据

示例：监听多个响应式对象的变化。在这个案例中，我们给出了x和y两个坐标变量，然后使用监听器监听这两个值的变化。只要其中有一个值发生变化，监听器的回调方法就会执行。

示例：immediate的用法。在这个案例中，我们演示了参数immediate的用法，这个参数用于立即执行监听，特别适合那种搜索的场景。当用户什么都没有输入的时候，我们立即执行一次监听，搜索所有数据。当用户输入内容以后，则再次根据监听到的新值，取搜索符合条件的数据。

示例：deep参数的用法。在这个案例中，我们定义了一个员工对象，有id和name以及age三个属性，我们使用监听器deep深度监听器其属性的变化，任何一个属性变化，都会触发监听的回调。对于对象类型的数据，如果不加deep参数，会无法监听，也就是监听器不会生效。

示例：监听对象的某个具体属性。开启deep会耗费很大的性能，在实际开发中，尽量少应用。如果需要监听对象的属性，可以参考如下案例。