一 toRefs
1 概念
ref定义的内容是固定的，如果ref最初定义的数据重新定义新的，那么新的数据不会应用，toRefs除了ref的功能还能保住数据改变后跟着更新
1.1 代码示例
name age修改以后person不会应用，
//数据
let person = reactive({name:'张三'，age:18})
let {name,age} = (person)
增加toRefs，toRefs接收reactive的每一组数据拉出形成一个新的对象，roRefs包裹的对象修改括号中的输出内容，reactive中的都会改变
//数据let person = reactive({name:'张三'，age:18})let {name,age} = toRefs(person)//修改括号中的数据 reactive的数据就会改变
二 computed计算属性
2 概念
computed计算属性是一种基于响应式依赖的数据，可以用来描述依赖其他状态的复杂逻辑
2.1 代码示例
fullName中的get输出的是只读内容，set输出的是changeFullName的修改内容
// 这么定义的fullName是一个计算属性，且是只读的
/* let fullName = computed(()=>{console.log(1)return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
}) */
// 这么定义的fullName是一个计算属性，可读可写
let fullName = computed({get(){return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value},set(value){I}
})function changeFullName(){fullName.value = 'li-si'
}
三 watch 监视
3 概念与五种情况
watch(监视谁，回调函数）回调函数newValue意为新的值，oldValue意为旧的值
作用：监视数据的变化与Vu2中的watch作用一致
特点：Vue3中的watch只能监视四种数据：
1.ref定义的数据
2.ref定义的对象数据
3.reactive定义的数据
4.函数返回的值
5.一个包含上述内容的数组
watch 的第一个参数是：被监视的数据watch 的第二个参数是：监视的回调watch 的第三个参数是：配置对象（deep、immediate 等等....）
3.1 情况一 ref定义的基本类型数据
<template><div class="person"><h1>情况一：监视ref定义的基本类型数据</h1><h2>当前求和为：{{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">
import {ref,watch} from 'vue' //使用ref添加watch监视
// 数据
let sum = ref(0)
// 方法
function changeSum(){sum.value += 1
}
// 监视
watch(sum,(newValue,oldValue)=>{ //newValue新数据 oldValue旧数据console.log('sum变化了',newValue,oldValue)
})
</script>
如果想要watch监视满足某个条件后停止,加stopWatch（停止）也可以使用x来表示如const x =watch，并用if语句写出条件。
监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()}
})
3.2 情况二 监视ref定义的对象类型的数据
监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。
<template>
<div class="person"><h1>情况二：监视【ref】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button>
</div>
</template><script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let person = ref({
name:'张三',
age:18
})
// 方法
function changeName(){
person.value.name += '~'
}
function changeAge(){
person.value.age += 1
}
function changePerson(){
person.value = {name:'李四',age:90}
}
//监视
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:true,immedlate:true}) //深度监听的配置,immedlate配置后上来就会先执行一次
注意:
若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。
若修改整个 ref 定义的对象，newValue 是新值，oldValue 是旧值，因为不是同一个对象了。
3.3 情况三 监视reactive定义的对象类型数据
监视reactive定义的对象类型数据，默认是开启深度监视的
<template>
<div class="person"><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button>
</div>
</template><script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changePerson(){Object.assign(person,{name:'李四',age:90})
}
//监视
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
}
3.4 情况四 监视ref或reactive定义的对象类型数据中的某个属性
监视 ref 或 reactive 定义的【对象类型】数据中的某个属性，注意点如下:
若该属性值不是【对象类型】，需要写成函数形式。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数。
<template><div class="person"><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template>
<script lang="ts" setup name="Person">import {reactive} from 'vue'//数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}
})// 方法
function changeName(){person.name += '~'
}
function changeAge(){person.age += 1
}
function changeC1(){person.car.c1 = '奥迪'
}
function changeC2(){person.car.c2 = '大众'
}
function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视，情况四：监视响应式对象中的某个属性，且该属性时基本类型的，要写成函数式
/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name变化了',newValue,oldValue)
}) */// 监视，情况四：监视响应式对象中的某个属性，且该属性基本类型的，推荐写成函数式
watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
3.5 情况五 监视多个数据
// 监视，情况五：监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)
},{deep:true})