目录
（四）监视 ref 或 reactive 定义的 对象类型数据中的属性
一、toRefs 与 toRef
（一）toRefs
toRefs 就是把 reactive 定义的对象变成 由 ref 定义的对象
先引入 toRefs
当我们解构一个对象时 如果对象是响应式的数据 但是我们解构出来的数据不是响应式的，我们就得想办法拿到响应式的数据
我们这时可以使用 toRefs 来解决这个问题 我们把对象中的每一个 东西都单独拎出来 形成一个新的对象 值来自于原来的对象 我们修改解构后的数据 原来的数据也会发生改变
（二）toRef
不太常用，前面是把一整个对象中的数据解构 这个是把对象中的数据一个一个进行解构
别忘了先引入 toRef
二、计算属性
（一）基本语法
和 vue2 不同 vue2 中是一个配置项 vue3 中得先引用
计算属性只要其中依赖的计算的数据发生变化就重新进行计算
1.只读的计算属性
注意这么写计算属性是只读的 不能对醉胡的数据进行修改
如果对姓和名修改不算 因为这是修改姓和名 从而引起 全名重新计算 而不是更改全名 不能这么验证
通过计算属性得出的数据是 ref 响应式类型的 所以得用 value
2.可以更改的计算属性
我们写计算属性时 里面写上 set 函数 和 get 函数
set 一开始就调用
代码只是引起了 set 调用
只要引起了 fullname 数据的变化 就调用 set 函数 （函数的返回值是 我们更改后的数据） 然后再重新赋值给姓和名即可 实现姓和名 同步变化。
（二）和 方法的比较
如果想多次使用我们的数据 如果用方法来写我们得用几次调用几次没有缓存 而且使用方法的时候方法后面得加括号
如果用 计算属性来写的话 返回的就是数据 我们不用加括号 如果想重复使用这个数据 数据会被缓存 只需执行一次计算即可
三、watch
用来监视数据的变化 和 vue2 中的 watch 作用一致
vue3 中的watch 只能监视下面 四种数据
基本语法：
监视也得引入 import {watch} from 'vue'
使用是函数形式 里面有两个形式参数
watch(监视谁，回调函数) 回调函数里面也有两个形式参数 一个是变化后 的新值 另一个是变化前的旧值（实际开发中我们是不管旧的值的）
注意不要加 value 监视的就是 ref 定义的数据 而不是里面的 value 值
（一）ref 定义的数据
1.设置监视
用 ref 定义一个数据 sum 然后引入监视 监视 sum 的变化
不要加 value
2.解除监视
当满足某些条件时解除监视 利用 watch 函数的返回值
返回值是一个函数 这个函数是停止这个监视的函数 直接调用即可解除监视
（二）ref 定义的对象类型的数据
1.监视对象地址
我们用 ref 定义一个对象类型的数据 person 并写好修改里面属性的方法，我们监视person 这个对象观察什么变化 watch 才能监视到
如果这样监视的话 我们发现 更改姓名和年龄是监视不到的 只有 person 对象 发生变化才会被 监视到（即 person 的地址发生变化时能检测到）
2.监视对象内部属性值
我们需手动开启深度监视
我们在监视函数里面 应该还有第三个对象类型的形式参数 里面有控制深度监视的属性 开启深度监视 deep 为 true 就能监视到内部的变化
还有别的属性 比如 immediate 如果设置这个属性为 true 就会在最开始的时候就会执行一次监视
（三）reactive 定义的数据
和 ref 定义的对象类型的数据 不同的是 reactive 定义的对象类型的数据不能整体修改
只能用如下的语法来修改 不能直接 person = ×××
但是这个语法 得到的person 对象不是 新的 而是 把person 中的属性替换成后面的东西，而地址没发生改变 属于修改属性
所以 监视用 reactive 定义的数据 是默认开启深度监视的 因为 person 的地址不会发生变化 所以里面有东西变化就会引起监视 而且深度监听是关不掉的
最后 newValue 和 oldValue 还是相同的
（四）监视 ref 或 reactive 定义的 对象类型数据中的属性
1.监视的不是对象类型
监视响应式对象中的某个属性，如果这个属性不是对象类型的就得写成函数形式
1°.错误情况
我们使用 reactive 定义对象类型的数据 我们想监视其中的一个属性 我们不能写成 下面的形式
因为watch 监视的是 reactive 定义的数据 只有 person对象 是 reactive 定义的数据 里面的属性 person.name 不是reactive 定义的数据
2°.正确方式
根据文档 我们能监视的东西只有如下几种
所以我们利用能监视的第一个类型 使用一个箭头函数 把 person.name 作为一个返回值 返回就能进行监视了
我们将第一个形式参数改成一个箭头函数返回我们监视的值 即可 如下
而且由于我们监视的是 person.name 所以后面的新旧值是不一样的
2.监视的是对象类型
1°.错误情况
如果属性是对象类型的，我们监视时 可以直接 写 person.car 但是会出现问题
当我们改变 c1 c2 的值时（即改变car 中的属性时）会引起监视，但是如果我们改变整个car （改变地址）则不会引起监视
2°.正确方式
我们仍旧使用函数式的形式来写 我们返回的时 person.car 的对象 这回能监视 整个 car 的变化了 但是不能监视到 内部的变化了 所以我们得启动深度监视 这样就能完美实现了
（五）包含上述内容的多个数组
如果想监视多个数据 我们最好用函数的形式 我们得把它们写在一个数组里面 然后后面的新旧数据也是数组的形式
四、watchEffect
（一）介绍
和 watch 不同 watch 不用说明具体监视谁 就是如果用 watch 要监视过多的对象时 就会在第一个形式参数里面写上很多的 监视对象 很冗余和麻烦
（二）使用方式
注意 该函数会立即调用一次函数，响应式的监听依赖（就是监听的数据）如果依赖发生变化 会重新执行该函数
先引入
然后直接写 watchEffect 函数 里面直接是一个回调函数 没有监视对象 没有监视对象就没有 oldvalue newvalue
五、标签的 ref 属性
（一）介绍
我们之前如果要获取 页面中的 h2 属性得需要 给我们要获取的标签加上 id 属性 然后 document.getelementById('idmingcheng')
但是如果在不同的 vue 文件中出现了 相同的 id 就会出现错误 因为 上面的 js 语法 会获取最早取这个名字的标签 从而产生混乱
因此我们使用一个新的东西 就是 ref 标签唯一的标识符
表示这个标签被 ref 定义的标签所包住 不同页面中相同的名字也不会互相干扰。
（二）使用
首先也是在 script 中 先引入 ref
现在模板中 给我们用到的标签 加上 ref 属性
然后在 script 中 用 ref 定义一个 和模板中一样名字 的属性 title2 ref 中包裹的内容为空即可
然后我们在点击事件中绑定的方法里面就能使用 这个 dom 元素了
输出结果
（三）特殊情况
如果给 app 中的 person 标签加上 ref 属性 我们就能拿到这个组件的 vc实例对象 但是具体内容我们看不见 我们需要在组件中 指出我们要给 app 看的数据
我们在 person 组件中 引入一个 新的东西 defineExpose 也是函数的形式使用 我们在里面指定上我们想给 app 父亲组件看的东西即可 a，b，c 就能点击按钮显示了
3823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
