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:如果该属性值是对象类型的,则可以直接写(只能监视对象内部属性变化,整个值变化监视不到),也可以写成函数形式(整个值变化可以监视到,内部属性变化监视不到,但是这时可以开启深度监视),建议写成函数形式
*情况五:监视上述多个数据