vue3中的watch和computed怎么使用

一、watch

1.检测reactive内部数据

注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程、web前端开发】

一定得注意不能修改reactive本身，修改本身不触发

2.监听 ref 数据

• 2.1监听一个 ref 数据

• 2.2监听多个 ref 数据

可以通过数组的形式，同时监听 age 和 num 的变化。

立即触发监听属性：

                {
                    immediate: true,
                }

开启深度监听 ref 数据

? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下

面对这样的没有触发watch我们解决办法有三个：

• 解决 1：当然直接修改整个对象的话肯定是会被监听到的（注意模板中对 obj 的修改，相当于修改的是 obj.value）。
  -`

  {{ obj.hobby.eat }}

`

• 解决 2：开启深度监听 ref 数据。

watch(
    obj,
    (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
    },
    {
        deep: true,
    }
)

就加上一句话，故此没有截图

• 解决 3：还可以通过监听 ref.value 来实现同样的效果。

因为 ref 内部如果包裹对象的话，其实还是借助 reactive 实现的，可以通过 isReactive 方法来证明。

• 监听普通数据
  监听响应式对象中的某一个普通属性值，要通过函数返回的方式进行（如果返回的是对象/响应式对象，修改内部的数据需要开启深度监听）。

二、computed

作用：computed 函数用来定义计算属性，上述的基础概念都是同vue2一样的，关于vue2中这两个知识点的定义大家可以移步：【vue2】计算与侦听的用法。