vue3学习（3）

1：toRef和toRefs
作用：将响应式对象中的每个属性，转换成ref对象
备注：toRef和toRefs作用一致，但toRefs可以批量转换

let person = reactive({name:'李雷',age:18})
let  {name,age} = toRefs(person)
name.value = '韩梅梅'
let nl = toRef(person,'age')

2：computed（和vue2的computed一致）
作用：根据已有数据计算出新数据。

//简写:只读
const fullName = computed(()=>{.....})
//读写
const fullName = computed({get:()=>{....},set:(val)=>{.....})

3：watch
vue3中的watch能监听四种数据

• ref定义的数据
• reactive定义的数据
• 函数返回一个值（getter函数）
• 一个包含上述内容的数组

***情况一：监视ref定义的【基本类型】数据：直接写数据名即可

let sum = ref(0)
const stopWatch = watch(sum,(newValue,oldValue)=>{console.log(newValue,oldValue) 
if(满足什么条件){停止监视}
})

watch的返回值是一个函数，可以根据条件判断什么时候停止监视

***情况二：监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部数据，要手动开启深度监视。
注意
1： 若修改的是ref定义的对象中的属性，那么newValue和oldValue都是一个值
2： 若修改的是ref定义的对象，newValue是新值，oldValue是老值，不是同一个对象了。

***情况三：监视reactive定义的对象类型数据，且默认开启了深度监视，因为地址值没有改变，所以newValue和oldValue值一样

***情况四：监视的是ref或reactive【对象类型】数据中的某个属性
注意
1:如果该属性值不是对象类型的，需要写成函数形式
2:如果该属性值是对象类型的，则可以直接写（只能监视对象内部属性变化，整个值变化监视不到），也可以写成函数形式（整个值变化可以监视到，内部属性变化监视不到，但是这时可以开启深度监视），建议写成函数形式

***情况五：监视上述多个数据

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】