Vue3+TS 之 Composition API(二)

写在前面

这里是小飞侠Pan🥳,立志成为一名优秀的前端程序媛！！！

本篇博客收录于我的github前端笔记仓库中，持续更新，欢迎star~

👉 https://github.com/mengqiuleo/myNote

Composition API(其他部分)

1）shallowReactive 与 shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

• 什么时候使用?

  • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ==> shallowReactive。
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ==> shallowRef。

    const m1 = reactive({ a: 1, b: { c: 2 } })
    const m2 = shallowReactive({ a: 1, b: { c: 2 } })

    const m3 = ref({ a: 1, b: { c: 2 } })
    const m4 = shallowRef({ a: 1, b: { c: 2 } })
1
2
3
4
5

2）readonly 与 shallowReadonly

• readonly: 让一个响应式数据变为只读的（深只读）。

• shallowReadonly：让一个响应式数据变为只读的（浅只读，只可以保证第一层数据不可以被更改，里面深层的数据依然可以更改）。

• 应用场景:

  • 在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除（比如我们引用了别人的代码）

    const state = reactive({
      a: 1,
      b: {
        c: 2
      }
    })

    // const rState1 = readonly(state)
    const rState2 = shallowReadonly(state)
1
2
3
4
5
6
7
8
9

3）toRaw 与 markRaw

• toRaw
  • 将一个由reactive生成的响应式对象转为普通对象
  • 这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
• markRaw
  • 标记一个对象，使其永远不会转换为代理。返回对象本身
  • 应用场景:
    • 有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象。
    • 当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。

    const state = reactive<any>({
      name: 'tom',
      age: 25
    })

    const testToRaw = () => {
      const user = toRaw(state)
      user.age++ // 界面不会更新
    }

    const testMarkRaw = () => {
      const likes = ['a', 'b']
      // state.likes = likes
      state.likes = markRaw(likes) // likes数组就不再是响应式的了
      setTimeout(() => {
        state.likes[0] += '--'
      }, 1000)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4）customRef

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

demo实现防抖效果：

<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>
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

5）provide 与 inject

• 作用：实现祖与后代组件间通信

• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

• 具体写法：

  1. 祖组件中：

     setup(){
     	......
         let car = reactive({name:'奔驰',price:'40万'})
         provide('car',car)
         ......
     }
     1
     2
     3
     4
     5
     6

  2. 后代组件中：

     setup(props,context){
     	......
         const car = inject('car')
         return {car}
     	......
     }
     1
     2
     3
     4
     5
     6

6）响应式数据的判断

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

		setup(){
			let car = reactive({name:'奔驰',price:'40W'})
			let sum = ref(0)
			let car2 = readonly(car)

			console.log(isRef(sum))
			console.log(isReactive(car))
			console.log(isReadonly(car2))
			console.log(isProxy(car))
			console.log(isProxy(sum))

			
			return {...toRefs(car)}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Composition API VS Option API

1）Option API 的问题

在传统的 Vue OptionsAPI 中，新增或者修改一个需求，就需要分别在 data，methods，computed 里修改 ，滚动条反复上下移动

2) 使用 Compisition API

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起

笔记均来自b站尚硅谷vue2+vue3的学习