三、其它 Composition API

1、toRaw与markRaw

①toRaw：

• 作用：将一个由reactive生成的响应式对象转为普通对象
• 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

②markRaw：

• 作用：标记一个对象，使其永远不会在成为响应式对象
• 应用场景：有些值不应该设置为响应式的，例如复杂的第三方类库等；当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

2、customRef

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

<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
								triggger()//告诉vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword=myRef('hello',500)//使用程序员自定义的ref
			return{keyword}
		}
	}
</script>

3、provide与inject

①作用：实现祖与后代组件间通信
②套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据
③具体写法：

• 祖组件中

setup(){
	......
	let car=reactive({name:'奔驰',price:'40万'})
	provide('car',car)
	......
}

• 后代组件中：

setup(props,context){
	......
	const car=inject('car')
	return{car}
	......
}

4、响应式数据的判断

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

5、shallowReactive与shallowRef

四、新的组件

1.Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

2.Teleport

什么是Teleport?–Teleport是一种能够将我们的组件HTML结构移动到指定位置的技术。

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹框</h3>
			<button @click="isShow=false">关闭弹框</button>
		<div>
	</div>
</teleport>

3、Suspense

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
• 使用步骤：
  ①异步引入组件

import {defineAsyncComponent} from "vue"
const Child=defineAsyncComponent(()=>import('./components/Child.vue'))

②使用Suspense包裹组件，并配置好default与fallback

<template>
	<div class="app">
		<h3>我是APP组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot：fallback>
				<h3>加载中....</h3>
			</template>
		</Suspense>
	<div>
<template>