Vue3学习笔记1

1.toRefs和toRef

1. toRefs将一个reactive定义的对象里的每一个key-value都拿出来

let person = reactive({
  name:'张三',
  age: 18
})

let { name,age } = toRefs(person)

2. toRef将一个响应式对象的某一个key-value拿出来

2.watch

1.参数

1. 第一个参数，监视的对象
2. 第二个参数，监视的回调函数
3. 第三个参数，监视的配置对象（deep,immediate等）

2.作用：监视数据的变化，只能监视ref，reactive，getter函数，包含上面3个的数组

1. 监视ref定义的基本数据
2. 监视ref定义的对象数据
   2.1 监视的是对象的地址值，person里的name和age发生变化并不会触发监视
   2.2 如果想触发监视，需要配置deep属性。因为是监视的地址值，如果修改name和age,oldVal返回的是修改后的值，并不会返回修改前的值。
   2.3 immediate属性，立即监视，先执行监视代码，oldVal返回undefined

let person = ref({
  name:'唐三藏',
  age:22
})
function changeName(){
  person.value.name += '!'
}
function changeAge() {
  person.value.age += 1
}
funciton changePerson() {
  person.value = {  name:'悟空', age: 50}
}
// 2.1
watch(person,(newVal,oldVal)=>{
  console.log('person发生了改变'，newVal,oldVal)
})
// 2.2
watch(person,(newVal,oldVal)=>{
  console.log('person发生了改变'，newVal,oldVal)
},{deep:true})
// 2.3
watch(person,(newVal,oldVal)=>{
  console.log('person发生了改变'，newVal,oldVal)
},{deep:true,immediate:true})

3. 监视reactive定义的对象数据
   3.1 默认是开启deep，且无法关闭。底层隐式的创建了一个深度监听。提供的3个修改方法并没有修改地址值，所以返回的newVal和oldVal相同。
   3.2 如果只想监视某一个属性（基本类型），需要写成函数形式，就是一个箭头函数返回值为想要监视的属性
   3.3 如果监视的某一个属性（对象类型），可以不用写成函数形式，但是不能监视整体的变化，即这个对象整体变化不会触发监视，如果写成函数形式，即可解决这个问题。

let person = reactive({
  name:'唐三藏',
  age:22,
  dizi:{
   dizi1:'孙悟空',
   dizi2:'猪八戒'
})
function changeName(){
  person.name += '!'
}
function changeAge() {
  person.age += 1
}
funciton changePerson() {
  Object.assign(prson,{ name:'悟空', age: 50 })
}
// 3.1
watch(person,(newVal,oldVal)=>{
  console.log('person发生了改变'，newVal,oldVal)
})
// 3.2
watch(()=>person.name,(newVal,oldVal)=>{
  console.log('person.name发生了改变'，newVal,oldVal)
})
// 3.3
watch(person.dizi,(newVal,oldVal)=>{
  console.log('person.dizi发生了改变'，newVal,oldVal)
})
watch(()=>person.dizi,(newVal,oldVal)=>{
  console.log('person.dizi发生了改变'，newVal,oldVal)
})

4. 监视多个数据

let person = reactive({
  name:'唐三藏',
  age:22,
  dizi:{
   dizi1:'孙悟空',
   dizi2:'猪八戒'
})
watch([()=>person.dizi,person.name],(newVal,oldVal)=>{
  console.log('person发生了改变'，newVal,oldVal)
})

3.watchEffect

1. 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
2. 第二个参数，是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。具体的需要在项目中进行实践