每周学习复盘

Vue3

第39周

日期：2024年9月26日

Vue3知识复盘

  • ref和reactive区别
答案

  • ref使用时需要.value，reactive不需要。

  • ref可以监视基本数据以及对象数据，reactive仅能监视对象数据。

  • ref监视对象数据的底层由reactive实现。

  • ref.value整体替换可以保留响应式，reactive替换会丢失响应式。

  • 如何修改以下代码可以将name、age变为响应式，如何将Person中的单个数据拿出来变成响应式
1
2
3
4
5
6
7
8
import {reactive} from 'vue'

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

let {name,age} = person
答案 
1
2
3
4
5
6
7
8
9
import {reactive,toRefs} from 'vue'

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

let {name,age} = toRefs(person)
let nianling = toRef(person,'age')
  • watch可以监视哪四种数据
答案

  • ref

  • reactive

  • 函数返回一个值（gatter函数）

  • 一个包含上述内容的数组

  • watch如何解除监视
答案 
1
2
3
4
5
const stopWatch = watch(sum,(newVal,oldVal)=>{
    if(newVal >=10) {
        stopWatch()
    }
})
  • watch如何定义配置项，比如深度监视
答案 
1
2
3
4
5
6
7
8
9
const stopWatch = watch(sum,(newVal,oldVal)=>{
    if(newVal >=10) {
        stopWatch()
    }
},{
    // 第三个参数传递配置项
    deep:true,
    immediate:true
})

当监视reactive时，默认为深度监视，且无法关闭

  • 如何只监听Person中的name属性值，不监视其他属性值
1
2
3
4
5
6
7
8
let person = reactive({
    name:'张三',
    age:18,
    car:{
        c1:'奔驰',
        c2:'宝马'
    }
})
答案 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
let person = reactive({
    name:'张三',
    age:18,
    car:{
        c1:'奔驰',
        c2:'宝马'
    }
})

// 以下方式不行，违背了监视原则，只能监视4种类型数据
watch(person.name,(newVal,oldVal)=>{
    console.log('person.name 变化了')
})

// person.name应该为gatter函数（一个函数，返回一个值）
// 正确写法如下
watch(()=>{return person.name},(newVal,oldVal)=>{
    console.log('person.name 变化了')
})
// 简写为
watch(()=> person.name,(newVal,oldVal)=>{
    console.log('person.name 变化了')
})

// 监视car数据的改变
// 此方式可以监视到car中的c1、c2改变，但是无法监视到整体替换 person.car = {c1:'奥迪',c2:'OOOO'}
watch(person.car,(newVal,oldVal)=>{
    console.log('person.car 变化了')
})

// 此方式可以监视到car中的整体替换 person.car = {c1:'奥迪',c2:'OOOO'}，但是无法监视到c1、c2改变
watch(()=> person.car,(newVal,oldVal)=>{
    console.log('person.car 变化了') 
})

// 此方式可以监视到car中的整体替换 person.car = {c1:'奥迪',c2:'OOOO'}以及c1、c2改变
watch(()=> person.car,(newVal,oldVal)=>{
    console.log('person.car 变化了') 
},{deep:true})

// 监视多个数值
watch([()=> person.car,()=> person.name],(newVal,oldVal)=>{
    console.log('变化了') 
},{deep:true})


  • watch和watchEffect区别
答案 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 当逻辑需要多个数据的时候，watch书写很麻烦
watch([()=>temp,()=>height],(val)=>{
      let [newTemp,newHeight] = val;
      if(newTemp > 10 || newHeight > 5){
      	console.log('给服务器发请求')
    }
 })

// 如果逻辑需要很多个数据的判断监听，采用watchEffect简化代码
watchEffect(() => {
    if(newTemp > 10 || newHeight > 5){
      	console.log('给服务器发请求')
    }
})
// 程序会自动根据逻辑进行对应的数据监听，无需指明监听数据
// watchEffect在页面加载时会调用一次

  • 父组件如何获取子组件的数据
答案 
1
2
3
4
5

// 在子组件JS的最后

defineExpose({a,b,c})
//显示指明允许父组件查看的数据
  • 父组件给子组件数据时如何限制类型
答案 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 在子组件JS的最后
import { widthDefaults } from 'vue'
import {type Persons} from '@/types'

// 只接收list
defineProps(['list'])

// 接收list + 限制类型
defineProps<{list:Persons}>()


defineExpose<list:Persons>() // Persons是ts接口中定义的数据格式
//显示指明允许父组件查看的数据

// 接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{list?:Persons}>(),{
    list:() => {id:'wadas',name:'abei',age:19}
})