Vue3 学习

vue3特性

1. 增加了setup语法糖，用来写组合api
   这是大佬对于setup的讲解：莫问前程F6的vue3之setup的使用理解
2. 支持多个根节点，支持jsx
3. 只引入所需要的Api
4. 引入了proxy来重写双向绑定
   proxy与vue2的Object.defineProperty(obj, prop, desc)方式相比有以下优势：
   丢掉麻烦的备份数据
   省去for in 循环
   可以监听数组变化
   代码更简化
5. 增加了补丁标记用来标记动态文本，在vue2中数据变更是进行全量的diff计算，而在vue3中只对于有标记的动态文本进行diff计算，大大优化了vue的性能

Ref全家桶

ref 深层次响应

1. 深层次响应
2. 修改、取值需要加上.vlaue

shallowRef 浅层次响应

1. shallowRef 浅层次响应，即数据修改后不会响应到页面

1
2
3
4
5
6
7
8
9
10
11
12
13

直接修改.value可以对shallowRef 绑定的数据进行视图响应

  man2.value = {
    name: '大满'
  }
1
2
3

triggerRef强制更新

triggerRef强制执行更新视图，shallowRef和triggerRef一起使用可以达到ref的响应效果

1
2
3
4
5
6
7
8
9
10

shallowRef 和ref一起使用会被受到影响响应到页面上，因为ref会调用triggerRef强制执行更新视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

点击修改按钮后，视图都更新了

customRef 自定义响应

可以利用customRef结合定时任务，实现防抖
!!!在修改前如果有定时器（定时时间内多次修改），那么先关闭这个定时器，再继续修改（实现防抖效果)

const guanguan = MyRef('guanguan')
function MyRef(value: string) {
  let timer: any
  return customRef((track, trigger) => {
    return {
      get() {
        track() //通知value的值会被修改，需要被追踪
        return value
      },
      set(newVal) {
        clearTimeout(timer)   //在修改前如果有定时器（定时时间内多次修改），那么先关闭这个定时器，再继续修改（实现防抖效果）
        timer = setTimeout(() => {
          value = newVal
          trigger()   //去通知get()要重新渲染
            console.log(guanguan)
          timer = null
        })
      }
    }
  })
}
const change = () => {
  guanguan.value = '大美女'

}
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

isRef

进行响应式数据判断，返回true和false
shallowRef和customRef都可以进行属于响应式数据都可进行判断

reactive全家桶

reactive 深层次

1. 只能绑定引用数据类型，object、array、map、set等
2. reactive取值修改不需要加上.value，适合form表单中使用,ref需要加上.value
3. 调用接口修改数组时不能直接等号赋值，会把外层的proxy覆盖掉破坏了响应式对象，导致无法响应，数组 可以使用push加字符串模板解构赋值，或者添加一个对象，把数组当作一个属性去处理

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

点击修改按钮后，guanguan1的数据不会响应到视图层，不会再实现双向绑定效果
解决办法：

 let timer = setTimeout(() => {
    guanguan1.off = {
      name: [...num]
    }
  }, 500)
  setTimeout(() => {
    guanguan1.off = {
      name: []
    }
    guanguan1.off.name.push(...num)
  }, 500)
1
2
3
4
5
6
7
8
9
10
11

shallowReactive 浅层次

1. 直接修改无法响应到视图
2. 指到第一个属性修改可以响应到视图层
3. 和 reactive 一起使用会被受到影响（即响应到视图层）

1
2
3
4
5
6
7
8
9
10
11
12

readonly isReadonly isShallow

readonly：只读
isReadonly：判断是否只读
isShallow：判断是否属于浅层次响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

点击事件控制台打印：

toRef toRefs 和 toRaw

toRef（对象名，key）

1. toRef只对响应式对象起作用，对于非响应式对象不起作用
2. 用于对象中key值的单独使用

1
2
3
4
5
6
7
8
9
10
11
12

toRefs（对象名）

适用于响应式对象的解构赋值

 let {name, sex} = toRefs(guanguan)
1

原理：

const toRefs = (obj: T) => {
  let map: any = {}
  for (let key in obj) {
    map[key] = toRef(obj, key)
  }
  return map
}
let {name, sex} = toRefs(guanguan)
1
2
3
4
5
6
7
8

toRaw

将响应式对象转为非响应式对象

  console.log(guanguan)
  console.log(toRaw(guanguan))
1
2