本篇文章带大家学习vue3，深入聊聊计算属性computed与侦听器watch的使用方法，希望对大家有所帮助！
一、watch
{{ obj.hobby.eat }}
注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程、web前端开发】
立即学习“前端免费学习笔记（深入）”；
{{ obj.hobby.eat }}
一定得注意不能修改reactive本身，修改本身不触发
- 2.1监听一个 ref 数据
{{ age }}
- 2.2监听多个 ref 数据
可以通过数组的形式，同时监听 age 和 num 的变化。
age: {{ age }} num: {{ num }}
立即触发监听属性：
{
immediate: true,
}
{{ age }}
开启深度监听 ref 数据
? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下
{{ obj.hobby.eat }}
面对这样的没有触发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 方法来证明。
{{ obj.hobby.eat }}
- 监听普通数据
监听响应式对象中的某一个普通属性值，要通过函数返回的方式进行（如果返回的是对象/响应式对象，修改内部的数据需要开启深度监听）。
{{ obj.hobby.eat }}
二、computed
作用：computed 函数用来定义计算属性，上述的基础概念都是同vue2一样的，关于vue2中这两个知识点的定义大家可以移步：【vue2】计算与侦听的用法。
firstName: {{ person.firstName }}
lastName: {{ person.lastName }}
